/* Top Stories by category (top-stories-v2.js): one tile per category; hover (or tap) opens it to the right with its next 5 stories. */
.mc-watch-page #restvid.ts2 { display: flex; align-items: flex-start; gap: 8px; }
#restvid.ts2 .ts2-cat { display: inline-flex; flex: 0 0 auto; align-items: flex-start; border-radius: var(--radius-sm, 8px); transition: background .15s; }
#restvid.ts2 .ts2-tile { position: relative; flex: 0 0 auto; }
#restvid.ts2 .ts2-tile img { margin: 0 !important; display: block; cursor: pointer; }
#restvid.ts2 .ts2-label {
  position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 2px 7px; border-radius: 999px;
  background: rgba(15, 23, 42, .78); color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; pointer-events: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#restvid.ts2 .ts2-when {
  position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; border-radius: 999px;
  background: rgba(15, 23, 42, .7); color: #fff; font-size: 10px; line-height: 14px; pointer-events: none;
}
#restvid.ts2 .ts2-more { display: inline-flex; gap: 6px; width: 0; overflow: hidden; margin-left: 0; transition: width .3s cubic-bezier(.2, .7, .3, 1), margin .3s; }
#restvid.ts2 .ts2-cat.is-open .ts2-more { margin-left: 6px; }
#restvid.ts2 .ts2-cat { padding: 0; transition: background .2s; }
#restvid.ts2 .ts2-cat.is-open { background: var(--bg-muted, #f1f5f9); }
#restvid.ts2 .ts2-ph {
  width: 132px; height: 74px; box-sizing: border-box; border-radius: var(--radius-sm, 8px); border: 1px dashed var(--border-subtle, #cbd5e1);
  background: var(--bg-muted, #f1f5f9); color: var(--slate-500, #64748b); font-size: 10px; display: flex; align-items: flex-start; justify-content: flex-end; padding: 6px 8px;
}
#restvid.ts2 .ts2-bad img { opacity: .45; filter: grayscale(1); }
#restvid.ts2 .ts2-empty .ts2-label { background: rgba(71, 85, 105, .85); }
#restvid.ts2 .ts2-label.ts2-hot { background: #dc2626; }
/* the arrows only when the 13 tiles do not fit the screen */
.mc-watch-page #left-scroll.ts2-hide, .mc-watch-page #right-scroll.ts2-hide { display: none !important; }

/* On the player (new Top Stories): "More videos" bottom right opens the playing story's category to the left; the share
   arrow YouTube shows bottom left is covered. Shown while the pointer is over the player or the video is not playing. */
.mc-watch-page #P1 .ts2-more-box, .mc-watch-page #P1 .ts2-cover-l { position: absolute; z-index: 25; bottom: 0; opacity: 0; pointer-events: none; transition: opacity .2s; }
.mc-watch-page #P1.ts2-on:not(.ts2-playing) .ts2-more-box, .mc-watch-page #P1.ts2-on.ts2-hover .ts2-more-box,
.mc-watch-page #P1.ts2-on:not(.ts2-playing) .ts2-cover-l, .mc-watch-page #P1.ts2-on.ts2-hover .ts2-cover-l { opacity: 1; pointer-events: auto; }
.mc-watch-page #P1 .ts2-more-box[hidden] { display: none; }
.mc-watch-page #P1 .ts2-cover-l { left: 0; width: 120px; height: 96px; background: radial-gradient(circle at 34% 64%, rgba(0,0,0,.92) 0, rgba(0,0,0,.92) 30px, rgba(0,0,0,0) 62px); }
.mc-watch-page #P1 .ts2-more-box { right: 0; display: flex; align-items: flex-end; gap: 10px; padding: 0 14px 12px 40px;
  background: linear-gradient(to left, rgba(0,0,0,.92) 0, rgba(0,0,0,.92) 240px, rgba(0,0,0,0) 100%); min-height: 84px; }
.mc-watch-page #P1 .ts2-mb-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 8px 0 16px; border: 0; border-radius: 12px;
  background: rgba(23, 23, 23, .92); color: #fff; font: 600 14px/1 var(--font-sans, system-ui); cursor: pointer; }
.mc-watch-page #P1 .ts2-mb-th { display: inline-flex; }
.mc-watch-page #P1 .ts2-mb-th img { width: 48px; height: 32px; object-fit: cover; border-radius: 6px; border: 2px solid #171717; margin-left: -14px; }
.mc-watch-page #P1 .ts2-mb-th img:first-child { margin-left: 0; }
.mc-watch-page #P1 .ts2-mb-list { display: flex; gap: 8px; max-width: 0; overflow: hidden; transition: max-width .3s cubic-bezier(.2,.7,.3,1); }
.mc-watch-page #P1 .ts2-more-box.is-open .ts2-mb-list { max-width: min(760px, calc(100vw - 420px)); overflow-x: auto; }
.mc-watch-page #P1 .ts2-mb-item { flex: 0 0 132px; display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; text-align: left; }
.mc-watch-page #P1 .ts2-mb-item img { width: 132px; height: 74px; object-fit: cover; border-radius: 8px; border: 2px solid transparent; }
.mc-watch-page #P1 .ts2-mb-item:hover img { border-color: #fff; }
.mc-watch-page #P1 .ts2-mb-item span { font-size: 11px; line-height: 1.25; max-height: 2.5em; overflow: hidden; }
@media (max-width: 760px) { .mc-watch-page #P1 .ts2-more-box.is-open .ts2-mb-list { max-width: calc(100vw - 200px); } }