/* Moments home on the phone (static/js/mobile-moments-home.js).

   The hero above is the library's own and is not restyled here. Under it:
   the ON TV NOW tile, the "new since you were here" row and the grid of every
   moment. A fun front: big covers, bold type, the page's own colour.

   Every colour is stated on an id selector with !important. The phone paints
   itself with blanket sweeps ([data-theme="light"] * * *, [class*="bytes"]
   :not(script), ...) that repaint any class-only rule; see the memory notes
   light-theme-paints-icons-black and modal-ids-get-blanket-repainted. Text
   that sits on a photograph lives in classes that carry "thumb" or "scrim",
   which mobile-page-colors.js leaves alone, so a page colour never paints
   dark ink onto a cover. The page's own surfaces use tokens, and the tokens
   take the page colour when the owner has one. */

#mobile-import-library.is-mom-home {
  --mom-page: #ffffff;
  --mom-ink: #0a0a0a;
  --mom-dim: rgba(10, 10, 10, 0.56);
  --mom-line: rgba(10, 10, 10, 0.12);
  --mom-hot: #ff2d55;
  --mom-slim-h: 74px;
}
html[data-theme*="dark"] #mobile-import-library.is-mom-home {
  --mom-page: #000000;
  --mom-ink: #ffffff;
  --mom-dim: rgba(255, 255, 255, 0.62);
  --mom-line: rgba(255, 255, 255, 0.16);
}
html[data-page-color] #mobile-import-library.is-mom-home {
  --mom-page: var(--pc-page);
  --mom-ink: var(--pc-ink);
  --mom-dim: var(--pc-dim);
  --mom-line: var(--pc-line);
  /* ON TV NOW and its bar: #ff2d55 vanished on a pink page (1.1:1). The
     palette's highlight is the app colour where it shows, the ink where not. */
  --mom-hot: var(--pc-hl, #ff2d55);
}

/* The page under the hero is the page, not the old dark feed. */
/* Three ids: the hero sheet paints the scroller #101014 through two ids,
   which showed as a black band under the last moments on an iPhone. The
   token still follows Glass (transparent) and the page colour. */
html body #mobile-import-library#mobile-import-library#mobile-import-library.is-mom-home .mobile-import-library__body,
html body #mobile-import-library#mobile-import-library.is-mom-home #mobile-import-library-list.is-mom-home {
  background: var(--mom-page) !important;
}
#mobile-import-library.is-mom-home #mobile-import-library-list.is-mom-home {
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
}

#mobile-import-library .mom {
  width: 100%; max-width: 100%; min-width: 0; overflow: hidden;
  /* Room at the end for the nav pill, the home bar, and on an iPhone the
     browser's own toolbar: the scroller is sized to 100vh, which reaches
     under Safari's bar, so the last row sat behind it. 100vh - 100dvh is
     that hidden strip (0 where there is none). */
  padding: 14px 16px calc(150px + env(safe-area-inset-bottom, 0px) + max(0px, 100vh - 100dvh));
  color: var(--mom-ink) !important;
  -webkit-text-fill-color: var(--mom-ink) !important;
}
#mobile-import-library .mom :where(*) { box-sizing: border-box; }
#mobile-import-library .mom-sr {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------------------------------------------------------------- headings */
#mobile-import-library .mom-head {
  display: flex; align-items: baseline; gap: 10px;
  margin: 26px 2px 12px; padding: 0;
  font-size: 14px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.1;
  color: var(--mom-ink) !important; -webkit-text-fill-color: var(--mom-ink) !important;
  background: none !important;
}
#mobile-import-library .mom-head span {
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--mom-dim) !important; -webkit-text-fill-color: var(--mom-dim) !important;
}
#mobile-import-library .mom-sec--row[data-mom-row="new"] .mom-head span {
  color: var(--mom-hot) !important; -webkit-text-fill-color: var(--mom-hot) !important;
}

/* ---------------------------------------------------------------- ON TV NOW */
#mobile-import-library .mom-onair-slot:empty { display: none; }
#mobile-import-library .mom-onair {
  all: unset; box-sizing: border-box;
  display: flex; align-items: center; gap: 14px; width: 100%;
  min-height: 88px; padding: 10px 12px 10px 10px; margin: 2px 0 0;
  border: 1.5px solid var(--mom-line) !important; border-radius: 20px;
  background: transparent !important; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms ease;
}
#mobile-import-library .mom-onair:active { transform: scale(0.985); }
#mobile-import-library .mom-onair__still {
  position: relative; flex: 0 0 auto; width: 104px; height: 68px; border-radius: 14px; overflow: hidden;
  background: #0b0b0c !important; display: grid; place-items: center;
}
#mobile-import-library .mom-onair__still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#mobile-import-library .mom-onair__still i {
  font-size: 18px; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
}
#mobile-import-library .mom-onair__still img + i { display: none; }
#mobile-import-library .mom-onair__copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#mobile-import-library .mom-onair__live {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
  color: var(--mom-hot) !important; -webkit-text-fill-color: var(--mom-hot) !important;
}
#mobile-import-library .mom-onair__live i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--mom-hot) !important;
  box-shadow: 0 0 0 0 var(--mom-hot); animation: mom-live 1.6s ease-out infinite;
}
@keyframes mom-live {
  0% { box-shadow: 0 0 0 0 rgba(255, 45, 85, 0.55); }
  100% { box-shadow: 0 0 0 7px rgba(255, 45, 85, 0); }
}
#mobile-import-library .mom-onair__title {
  display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 16px; font-weight: 800; line-height: 1.2;
  color: var(--mom-ink) !important; -webkit-text-fill-color: var(--mom-ink) !important;
}
#mobile-import-library .mom-onair__ch {
  display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 12px; font-weight: 600;
  color: var(--mom-dim) !important; -webkit-text-fill-color: var(--mom-dim) !important;
}
#mobile-import-library .mom-onair__bar {
  display: block; height: 3px; margin-top: 4px; border-radius: 2px; overflow: hidden;
  background: var(--mom-line) !important;
}
#mobile-import-library .mom-onair__bar i { display: block; height: 100%; background: var(--mom-hot) !important; border-radius: 2px; }
#mobile-import-library .mom-onair__go {
  flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center;
}
#mobile-import-library .mom-onair__go i {
  font-size: 15px; color: var(--mom-ink) !important; -webkit-text-fill-color: var(--mom-ink) !important;
}

/* ---------------------------------------------------------------- tiles */
#mobile-import-library .mom-row {
  display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain;
  margin: 0 -16px; padding: 0 16px 2px; scroll-padding: 0 16px;
  scroll-snap-type: x proximity; scrollbar-width: none;
}
#mobile-import-library .mom-row::-webkit-scrollbar { display: none; }
#mobile-import-library .mom-row .mom-thumb { flex: 0 0 150px; height: 208px; scroll-snap-align: start; }
#mobile-import-library .mom-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px;
}
#mobile-import-library .mom-grid .mom-thumb { height: 236px; }

#mobile-import-library .mom-thumb {
  position: relative; overflow: hidden; border-radius: 18px; cursor: pointer;
  background: #0b0b0c !important;
  -webkit-tap-highlight-color: transparent; transform: translateZ(0);
  transition: transform 140ms ease;
  animation: mom-in 360ms cubic-bezier(.2, .8, .2, 1) both;
}
#mobile-import-library .mom-thumb:active { transform: scale(0.97); }
@keyframes mom-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#mobile-import-library .mom-thumb__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
/* YouTube's hqdefault still is 4:3 with the 16:9 picture letterboxed in
   it; scaled so the black bands fall outside the cover. */
#mobile-import-library .mom-thumb.is-yt .mom-thumb__img { transform: scale(1.34); }
#mobile-import-library .mom-onair__still.is-yt img { transform: scale(1.34); }
/* No picture: a bold plate in the kind's own colour, never grey. */
#mobile-import-library .mom-thumb__plate { display: none; }
#mobile-import-library .mom-thumb.is-plate .mom-thumb__plate {
  position: absolute; inset: 0; display: grid; place-items: center;
}
#mobile-import-library .mom-thumb.is-plate.is-video { background: linear-gradient(150deg, #ff2d55, #7a00ff) !important; }
#mobile-import-library .mom-thumb.is-plate.is-music { background: linear-gradient(150deg, #ff7a00, #ff2d55) !important; }
#mobile-import-library .mom-thumb.is-plate.is-photo { background: linear-gradient(150deg, #00b4ff, #7a00ff) !important; }
#mobile-import-library .mom-thumb.is-plate.is-link { background: linear-gradient(150deg, #00c96b, #0077ff) !important; }
#mobile-import-library .mom-thumb.is-plate .mom-thumb__plate i {
  font-size: 40px; opacity: 0.9; transform: translateY(-14px);
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
}
#mobile-import-library .mom-thumb__kind {
  position: absolute; top: 9px; left: 9px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(0, 0, 0, 0.55) !important;
}
#mobile-import-library .mom-thumb__kind i {
  font-size: 11px; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
}
#mobile-import-library .mom-thumb.is-video .mom-thumb__kind i { transform: translateX(1px); }
#mobile-import-library .mom-thumb__len {
  position: absolute; top: 11px; right: 10px; padding: 3px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
  background: rgba(0, 0, 0, 0.55) !important;
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
}
#mobile-import-library .mom-thumb__foot {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 6px;
  padding: 34px 10px 9px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.82)) !important;
}
#mobile-import-library .mom-thumb__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 14px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere;
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
}
#mobile-import-library .mom-thumb__meta {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0;
}
/* The channel label is its own button: it opens the TV on that channel.
   Tall enough to hit with a thumb, drawn small. */
#mobile-import-library .mom-thumb__ch {
  all: unset; box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%;
  min-height: 30px; margin: -6px 0 -6px -6px; padding: 6px;
  border-radius: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: transparent !important; backdrop-filter: none !important;
}
#mobile-import-library .mom-thumb__ch span {
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.86) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.86) !important;
  text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 3px;
}
#mobile-import-library .mom-thumb__ch i {
  flex: 0 0 auto; font-size: 10px;
  color: rgba(255, 255, 255, 0.86) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.86) !important;
}
#mobile-import-library .mom-thumb__ch:active span { text-decoration-color: #ffffff; }
#mobile-import-library .mom-row .mom-thumb__ch i { display: none; }
#mobile-import-library .mom-thumb__plus {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 800;
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
}
#mobile-import-library .mom-thumb__plus i {
  font-size: 11px; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
}

/* ---------------------------------------------------------------- slim header
   The hero scrolls away and this rides in under the app header's ☰ and 🔔:
   the hero's own photo, blurred and shaded, with the face and the name.
   A zero-height sticky holder, so it takes no room from the hero. */
#mobile-import-library .mom-scrim-bar { display: none; }
#mobile-import-library.is-mom-home .mom-scrim-bar {
  display: block; position: sticky; top: 0; height: 0; z-index: 400; pointer-events: none;
}
#mobile-import-library .mom-scrim-bar__in {
  position: absolute; left: 0; right: 0; top: 0; height: var(--mom-slim-h, 74px); overflow: hidden;
  opacity: var(--mom-p, 0); transform: translateY(calc((1 - var(--mom-p, 0)) * -10px));
  background: #0b0b0c !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, calc(var(--mom-p, 0) * 0.28));
}
#mobile-import-library .mom-scrim-bar.is-on .mom-scrim-bar__in { pointer-events: none; }
#mobile-import-library .mom-scrim-bar__photo {
  position: absolute; inset: -30px; width: calc(100% + 60px); height: calc(100% + 60px); object-fit: cover;
  filter: blur(18px) saturate(1.35); transform: scale(1.1);
}
#mobile-import-library .mom-scrim-bar__shade {
  position: absolute; inset: 0; background: rgba(0, 0, 0, 0.42) !important;
}
#mobile-import-library .mom-scrim-bar__who {
  position: absolute; left: 50%; top: var(--mom-slim-mid, calc(var(--mom-slim-h, 74px) - 29px)); transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 9px; max-width: calc(100% - 40px);
}
#mobile-import-library .mom-scrim-bar__face {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}
#mobile-import-library .mom-scrim-bar__name {
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 17px; font-weight: 800; letter-spacing: 0.02em;
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
}

/* +1s always show. The user asked for them to stay (2026-09-27), so the
   "engagement off" class (bytes-feed-stats-hidden), which hides the cinema's
   action row in mobile-cinema.css, does not take the +1 away: the grid keeps
   its "+N" and the viewer keeps its row. Comments-off still hides the chat
   mark on its own rule. */
html.bytes-feed-stats-hidden body .mcin .mcin__acts,
html body.bytes-feed-stats-hidden .mcin .mcin__acts { display: flex !important; }

@media (prefers-reduced-motion: reduce) {
  #mobile-import-library .mom-thumb { animation: none; }
  #mobile-import-library .mom-onair__live i { animation: none; }
}

/* The create sheet owns the screen: a drag inside it never scrolls Moments
   behind it (which moved the page and slid the slim bar in underneath), and
   the sheet's own scroll stops at its ends instead of handing on. */
html body #bytes-modal-scroll { overscroll-behavior: contain !important; }
html body:has(#new-custom-modal[style*="display: block"]) #mobile-import-library .mobile-import-library__body {
  overflow: hidden !important;
  touch-action: none !important;
}