/* "More from this video": chips swap one section in place (public/video-more.js). Nothing here animates anything but opacity. */
.more-wrap { position: relative; }

/* Open: the chip cloud becomes one tidy strip that stays under the top bar while its section scrolls past. */
.more-box.is-open {
  position: sticky; top: var(--vdock-h, calc(env(safe-area-inset-top) + 40px)); z-index: 5;
  margin: 4px 0 12px; padding: 8px 6px 8px 10px; border-radius: 14px;
  background: var(--paper-2); box-shadow: 0 1px 0 var(--paper-line), 0 10px 16px -12px rgba(8, 14, 80, .45);
}
.more-box.is-open h3 { display: none; }
.more-box.is-open .more-chips {
  flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-right: 22px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
}
.more-box.is-open .more-chips::-webkit-scrollbar { display: none; }
.more-box.is-open .more-chip { flex: none; white-space: nowrap; min-height: 40px; }

.more-chip:focus-visible { outline: 3px solid var(--wall); outline-offset: 2px; }
.more-chip[aria-expanded="true"] { box-shadow: 0 2px 0 rgba(8, 14, 80, .25); }

/* The section that opens fades in; reduced motion skips even that. */
.panel .section.folded:not([hidden]) { animation: vm-in .18s ease-out both; }
@keyframes vm-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .panel .section.folded:not([hidden]) { animation: none; } }

.vm-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Closed: each chip is a small print with a bit of tape and one line saying what is inside. Open: slim pills, hints hidden. */
.more-box:not(.is-open) .more-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 8px; padding-top: 4px; }
.more-box:not(.is-open) .more-chip {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; min-width: 0;
  padding: 11px 12px 9px; min-height: 54px; border-radius: 12px; border: 0; background: #fff;
  box-shadow: 0 1px 1px rgba(8, 14, 80, .14), 0 4px 7px -2px rgba(8, 14, 80, .18);
}
.more-box:not(.is-open) .more-chip::before {
  content: ""; position: absolute; top: -5px; left: 14px; width: 30px; height: 11px; border-radius: 2px;
  background: var(--tape, #ffe066); opacity: .92; transform: rotate(-3deg);
}
.more-box:not(.is-open) .more-chip:nth-child(4n+2)::before { --tape: #7fe0ff; left: auto; right: 14px; transform: rotate(3deg); }
.more-box:not(.is-open) .more-chip:nth-child(4n+3)::before { --tape: #ff8fc8; }
.more-box:not(.is-open) .more-chip:nth-child(4n)::before { --tape: #b8f28c; left: auto; right: 14px; transform: rotate(2deg); }
.more-box:not(.is-open) .more-chip:nth-child(4n+1)::before { --tape: #c9a8ff; }
.more-chip .mc-name { display: flex; align-items: baseline; gap: 4px; font: 800 14px/1.2 var(--ui); letter-spacing: -.01em; }
.more-chip .mc-hint { display: block; max-width: 100%; font: 500 12px/1.3 var(--ui); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.more-chip[aria-expanded="true"] .mc-hint { color: var(--on-wall-2); }
.more-box.is-open .more-chip .mc-hint { display: none; }
.more-box.is-open .more-chip .mc-name { font: 700 13px var(--ui); letter-spacing: 0; }