/* recent-popin.js — the "Recent" pill on the Videos / Games / Images split
   selectors and the list it pops in. The pill is the Videos selector's VR pill
   (.vsplit-mini) mirrored to the top-left corner, so the two corners read as one
   component; the pop-in uses the Hearth menu's panel and ember accent
   (hearth-menu.css) so it belongs to the same family as the right-click menus. */

.hr-btn {
  position: absolute;
  z-index: 7;
  top: 18px;
  left: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 5px 16px 5px 6px;
  border: 1px solid rgba(245, 158, 11, .42);
  border-radius: 999px;
  background: rgba(10, 11, 16, .72);
  backdrop-filter: blur(12px);
  color: var(--text, #e7ecf3);
  font: inherit;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), border-color .2s, background .2s, box-shadow .2s;
  animation: hr-btn-in .5s cubic-bezier(.2, .9, .3, 1.2) .6s both;
}
.hr-btn img {
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 2px 10px rgba(245, 158, 11, .45));
  transition: transform .45s cubic-bezier(.3, 1.6, .5, 1);
}
.hr-btn-title { font-weight: 800; font-size: 15px; letter-spacing: -.01em; }
.hr-btn:hover,
.hr-btn:focus-visible,
.hr-btn[aria-expanded="true"] {
  border-color: rgba(245, 158, 11, .9);
  background: rgba(245, 158, 11, .14);
  box-shadow: 0 6px 28px rgba(245, 158, 11, .28);
  transform: translateY(-2px);
  outline: none;
}
.hr-btn:hover img,
.hr-btn:focus-visible img,
.hr-btn[aria-expanded="true"] img { transform: rotate(-12deg) scale(1.1); }
@keyframes hr-btn-in { from { opacity: 0; transform: translateY(-10px) scale(.9); } to { opacity: 1; transform: none; } }
/* Leaving the selector: fade with the rest of it. */
.vsplit.is-leaving .hr-btn,
.gsplit.is-leaving .hr-btn,
.imgsplit.is-leaving .hr-btn,
.vsplit.is-choosing .hr-btn,
.gsplit.is-choosing .hr-btn,
.imgsplit.is-choosing .hr-btn { opacity: 0; transition: opacity .25s ease; pointer-events: none; }

/* ── The pop-in ─────────────────────────────────────────────────────────── */
.hr-pop {
  position: absolute;
  z-index: 8;
  box-sizing: border-box;              /* its width is set in px from the gate's: padding inside it */
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid #3a4159;
  background:
    radial-gradient(260px 120px at 0% 0%, rgba(245, 158, 11, .08), transparent 70%),
    linear-gradient(180deg, rgba(26, 30, 43, .97) 0%, rgba(22, 25, 36, .97) 100%);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 4px 10px rgba(0, 0, 0, .45), 0 24px 60px rgba(0, 0, 0, .55);
  color: #e7ecf3;
  transform-origin: 28px -10px;
  opacity: 0;
  transform: translateY(-8px) scale(.92);
  transition: opacity .18s ease, transform .26s cubic-bezier(.2, .9, .3, 1.15);
}
.hr-pop.is-open { opacity: 1; transform: none; }
.hr-pop.is-closing { opacity: 0; transform: translateY(-6px) scale(.96); transition-duration: .14s, .16s; }

.hr-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 8px 8px;
  border-bottom: 1px solid #262b3c;
  margin-bottom: 4px;
}
.hr-title { font-weight: 750; font-size: 13.5px; letter-spacing: .01em; }
.hr-count { font-size: 11.5px; color: #5d6678; font-variant-numeric: tabular-nums; }
.hr-list { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.hr-list::-webkit-scrollbar { width: 8px; }
.hr-list::-webkit-scrollbar-thumb { background: var(--profile-scroll-thumb); border-radius: 8px; }
.hr-empty { margin: 14px 10px; font-size: 12.5px; color: #9aa3b8; line-height: 1.45; }

.hr-row {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 10px;
  opacity: 0;
  transform: translateY(6px);
}
.hr-pop.is-open .hr-row {
  animation: hr-row-in .32s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(60ms + var(--i, 0) * 26ms);
}
@keyframes hr-row-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.hr-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 52px;
  padding: 5px 6px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.hr-main:hover, .hr-main:focus-visible { background: rgba(245, 158, 11, .13); outline: none; }
.hr-main:focus-visible { box-shadow: 0 0 0 1.5px rgba(245, 158, 11, .45) inset; }
.hr-art {
  flex: none;
  width: 72px;
  aspect-ratio: 3 / 2;
  border-radius: 7px;
  overflow: hidden;
  background: #242a3d;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
.hr-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hr-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hr-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-meta { font-size: 11.5px; color: #9aa3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-play {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(245, 158, 11, .35);
  border-radius: 50%;
  background: rgba(245, 158, 11, .1);
  color: #fcd34d;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.hr-play svg { width: 18px; height: 18px; fill: currentColor; margin-left: 2px; }
.hr-play:hover, .hr-play:focus-visible { background: rgba(245, 158, 11, .24); transform: scale(1.06); outline: none; }

/* An episode's "S2 · E24" ahead of its name. */
.hr-tag {
  display: inline-block;
  margin-right: 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  color: #fcd34d;
  font-variant-numeric: tabular-nums;
}

/* ── A show row's popout: the episodes watched, to the row's right ──────── */
/* The chevron at the row's end is the popout's handle: the way in on touch,
   the cue on a pointer (hover opens it as well). */
.hr-more {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #6f788c;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.hr-more svg { width: 18px; height: 18px; transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.hr-more:hover, .hr-more:focus-visible,
.hr-row.is-subbed .hr-more { color: #fcd34d; background: rgba(245, 158, 11, .13); outline: none; }
.hr-row.is-subbed .hr-more svg { transform: translateX(2px); }
.hr-row.is-subbed .hr-main { background: rgba(245, 158, 11, .09); }
@media (hover: none) { .hr-more { color: #c7cee0; } }

.hr-sub {
  position: absolute;
  top: 0;
  z-index: 9;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid #3a4159;
  background:
    radial-gradient(260px 120px at 0% 0%, rgba(245, 158, 11, .08), transparent 70%),
    linear-gradient(180deg, rgba(26, 30, 43, .97) 0%, rgba(22, 25, 36, .97) 100%);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 4px 10px rgba(0, 0, 0, .45), 0 24px 60px rgba(0, 0, 0, .55);
  color: #e7ecf3;
  transform-origin: -10px 26px;
  opacity: 0;
  transform: translateX(-8px) scale(.96);
  transition: opacity .16s ease, transform .24s cubic-bezier(.2, .9, .3, 1.15);
}
.hr-sub.is-left { transform-origin: calc(100% + 10px) 26px; transform: translateX(8px) scale(.96); }
/* The 8px between the list and its popout belongs to the popout, so crossing it
   is not leaving (with the safe triangle in recent-popin.js headingToSub()). */
.hr-sub::before { content: ''; position: absolute; top: 0; bottom: 0; left: -10px; width: 10px; }
.hr-sub.is-left::before { left: auto; right: -10px; }
.hr-sub.is-over::before { display: none; }
/* No room on either side (a narrow window): it stacks over the list instead. */
.hr-sub.is-over { transform-origin: 50% 20px; transform: translateY(6px) scale(.97); box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 8px 20px rgba(0, 0, 0, .55), 0 30px 70px rgba(0, 0, 0, .7); }
.hr-sub.is-open { opacity: 1; transform: none; }
.hr-sub.is-closing { opacity: 0; transform: translateX(-4px) scale(.98); transition-duration: .12s, .14s; }
.hr-sub.is-left.is-closing { transform: translateX(4px) scale(.98); }
.hr-sub.is-open .hr-row {
  animation: hr-row-in .28s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(40ms + var(--i, 0) * 22ms);
}
/* Drawn again once the show's names and stills arrived: no second entrance. */
.hr-sub.is-settled .hr-row { animation: none; opacity: 1; transform: none; }
.hr-sub .hr-art { width: 64px; }
/* The last row of a popout: the show's own page. */
.hr-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  margin-top: 4px;
  padding: 6px 10px 6px 12px;
  border: 0;
  border-top: 1px solid #262b3c;
  border-radius: 0 0 8px 8px;
  background: transparent;
  color: #c7cee0;
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}
.hr-foot svg { width: 16px; height: 16px; flex: none; color: #fcd34d; }
.hr-foot:hover, .hr-foot:focus-visible { background: rgba(245, 158, 11, .13); color: #fff; outline: none; }
.hr-foot:focus-visible { box-shadow: 0 0 0 1.5px rgba(245, 158, 11, .45) inset; }

@media (max-width: 760px) {
  .hr-btn { top: 10px; left: 10px; min-height: 44px; padding: 4px 12px 4px 4px; }
  .hr-btn img { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .hr-btn, .hr-btn img, .hr-pop, .hr-sub, .hr-row, .hr-play, .hr-more, .hr-more svg { animation: none !important; transition: none !important; }
  .hr-row { opacity: 1; transform: none; }
}