/* Full-screen artwork viewer compatibility layer for the standalone PRHUB. */
html.prhub-detail-active,
body.prhub-detail-active {
  overflow: hidden !important;
}

.detail-scrim {
  inset: 0 !important;
  right: 0 !important;
  z-index: 180 !important;
  transition: opacity 260ms ease !important;
}

.detail-panel {
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: none !important;
  border: 0 !important;
  clip-path: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: scale(.985) !important;
  transition: opacity 260ms ease, transform 380ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 380ms !important;
}

.detail-panel.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  transition-delay: 0s !important;
}

.detail-content {
  position: relative !important;
  grid-template-rows: minmax(0, 1fr) 112px !important;
}

.detail-prompt-card {
  height: min(54vh, 520px) !important;
  max-height: 100% !important;
}

.prompt-state.prompt-loading {
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  place-items: center !important;
}

.prompt-state.prompt-loading .spin { color: #d8ff63 !important; }

.detail-toolbar {
  position: absolute !important;
  inset: 0 0 auto !important;
  z-index: 6 !important;
  display: flex !important;
  height: 84px !important;
  padding: 20px clamp(18px, 3.2vw, 58px) 0 !important;
  background: transparent !important;
  pointer-events: none !important;
}

.detail-toolbar .icon-button,
.detail-back-button {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  pointer-events: auto !important;
}

.detail-stage {
  grid-row: 1 !important;
  min-width: 0 !important;
}

.detail-image-canvas {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

.detail-stage.is-landscape:not(.is-actual-size) .detail-image-canvas img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
}

.detail-stage.is-portrait:not(.is-actual-size) .detail-image-canvas img {
  width: auto !important;
  height: 100% !important;
  max-width: none !important;
  max-height: 100% !important;
}

.detail-stage.is-square:not(.is-actual-size) .detail-image-canvas img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

.detail-stage-info {
  position: absolute !important;
  z-index: 4 !important;
  left: clamp(18px, 3.2vw, 58px) !important;
  bottom: 22px !important;
  display: grid !important;
  justify-items: start !important;
  gap: 7px !important;
  max-width: min(42vw, 420px) !important;
  pointer-events: none !important;
}

.detail-stage-info .detail-heading {
  justify-content: flex-start !important;
  text-align: left !important;
}

.detail-stage-info .detail-meta {
  justify-self: start !important;
  gap: 10px !important;
  font-size: 9px !important;
}

.detail-footer {
  grid-row: 2 !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 clamp(12px, 2.8vw, 48px) 10px !important;
}

.detail-thumbnail-deck {
  width: 100% !important;
  height: 100% !important;
}

.detail-bottom-bar {
  position: absolute !important;
  z-index: 5 !important;
  bottom: 18px !important;
  left: 50% !important;
  min-height: 42px !important;
  transform: translateX(-50%) !important;
}

.detail-auto-prompt,
.detail-icon-action {
  background: rgba(7, 8, 10, .72) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}

.detail-shortcut-hint {
  position: absolute !important;
  z-index: 3 !important;
  right: clamp(18px, 3.2vw, 58px) !important;
  bottom: 7px !important;
  margin-left: 0 !important;
  white-space: nowrap !important;
}

.detail-panel .detail-reveal {
  transition: opacity 300ms ease, transform 420ms cubic-bezier(.22, 1, .36, 1);
}

@media (min-width: 901px) {
  .page-frame,
  .detail-open .page-frame {
    width: 100% !important;
    transform: none !important;
    filter: none !important;
  }

  .topbar,
  .detail-open .topbar {
    right: 0 !important;
    transform: none !important;
  }
}

.site-shell button:not(:disabled):not([data-no-control-effect]):hover,
.site-shell a:not([data-no-control-effect]):hover,
.site-shell [role="button"]:not([data-no-control-effect]):hover {
  transform: none !important;
}

.site-shell button.scroll-cue,
.site-shell button.scroll-cue:not(:disabled):hover,
.site-shell button.scroll-cue:focus-visible,
.site-shell button.scroll-cue:not(:disabled):active {
  position: absolute !important;
  bottom: 19px !important;
  left: 50% !important;
  overflow: visible !important;
  transform: translate3d(-50%, 0, 0) !important;
  transition: none !important;
  animation: none !important;
}

.site-shell button.scroll-cue:hover svg,
.site-shell button.scroll-cue:focus-visible svg,
.site-shell button.scroll-cue:active svg {
  transform: none !important;
  animation: none !important;
}

.site-shell .sort-control select:focus,
.site-shell .sort-control select:focus-visible {
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

.member-button > span { display: none !important; }
.member-button { width: 39px !important; padding: 0 !important; justify-content: center !important; }

:root[data-theme=light] {
  --bg: #f7f7f8;
  --surface-2: #f0f1f2;
  --accent: #2563eb;
  --glass: rgba(247, 247, 248, .86);
  --shadow: 0 30px 80px rgba(24, 52, 96, .14);
  --pr-scrollbar-thumb: rgba(255, 255, 255, .96);
  --pr-scrollbar-thumb-hover: #fff;
}

:root[data-theme=light] .site-shell {
  background: radial-gradient(circle at 45% -10%, rgba(95, 103, 112, .035), transparent 29%), var(--bg);
}

:root[data-theme=light] .pf-scroll-rail__thumb {
  background: #fff !important;
}

@media (max-width: 560px) {
  .detail-panel { width: 100% !important; }
  .detail-content { grid-template-rows: minmax(0, 1fr) 106px !important; }
  .detail-toolbar { height: 68px !important; padding: 15px 14px 0 !important; }
  .detail-stage-info { left: 14px !important; right: 154px !important; bottom: 13px !important; max-width: none !important; gap: 5px !important; }
  .detail-stage-info .detail-meta { gap: 7px !important; font-size: 8px !important; }
  .detail-footer { padding-inline: 5px !important; padding-bottom: 7px !important; }
  .detail-bottom-bar {
    right: 63px !important;
    bottom: 13px !important;
    left: 14px !important;
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 7px !important;
    min-height: 0 !important;
    max-width: none !important;
    transform: none !important;
  }

  .detail-bottom-bar .detail-recreate-button { grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important; }
  .detail-bottom-bar .detail-prompt-button { grid-column: 2 !important; grid-row: 1 !important; justify-self: start !important; }
  .detail-bottom-bar .detail-auto-prompt { grid-column: 3 / 6 !important; grid-row: 1 !important; justify-self: end !important; }
  .detail-bottom-bar .detail-favorite-action { grid-column: 4 !important; grid-row: 2 !important; justify-self: end !important; }
  .detail-bottom-bar .detail-share-action { grid-column: 5 !important; grid-row: 2 !important; justify-self: end !important; }
  .detail-prompt-card { height: min(58vh, 420px) !important; max-height: 100% !important; }
  .detail-shortcut-hint { display: none !important; }
}

@media (max-width: 360px) {
  .detail-bottom-bar { gap: 5px !important; }
  .detail-recreate-button,
  .detail-prompt-button { padding-inline: 8px !important; font-size: 10px !important; }
  .detail-recreate-button > svg,
  .detail-prompt-button > svg { display: none !important; }
  .detail-auto-prompt > span { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .detail-scrim,
  .detail-panel,
  .detail-panel.open,
  .detail-panel .detail-reveal {
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }

  .detail-panel,
  .detail-panel.open,
  .detail-panel .detail-reveal { transform: none !important; }
}