/* Holo: Holo showcase layer embedded-payload renderer.
   Scoped to #app-layers; it replaces retired-holo-showcase-placeholder and never blocks clicks. */
#app-layers .holo-showcase-assets-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 280ms ease;
  overflow: hidden;
}

#app-layers .holo-showcase-assets-layer[data-holo-showcase-status="mounted"],
#app-layers .holo-showcase-assets-layer[data-holo-showcase-status="mounted-grid-scatter"],
#app-layers .holo-showcase-assets-layer[data-holo-showcase-status="mounted-grid-image"],
#app-layers .holo-showcase-assets-layer[data-holo-showcase-status="mounted-grid-holo"],
#app-layers .holo-showcase-assets-layer[data-holo-showcase-status="mounted-simple-base-image"] {
  opacity: 1;
}

#app-layers .holo-showcase-assets-item {
  position: absolute;
  z-index: 1;
  left: var(--holo-showcase-left, 50%);
  top: var(--holo-showcase-top, 50%);
  width: clamp(140px, var(--holo-showcase-size, 30vmin), 640px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) rotate(var(--holo-showcase-rotate, 0deg));
  opacity: var(--holo-showcase-opacity, 0.34);
  pointer-events: none;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.32));
}

#app-layers .holo-showcase-assets-item .holo-renderer-shell,
#app-layers .holo-showcase-assets-item .holo-renderer-stage,
#app-layers .holo-showcase-assets-item .holo-renderer-canvas {
  width: 100%;
  height: 100%;
}

#app-layers .holo-showcase-assets-item .holo-renderer-hud,
#app-layers .holo-showcase-assets-item .holo-renderer-notes {
  display: none !important;
}

@media (max-width: 720px) {
  #app-layers .holo-showcase-assets-item {
    width: clamp(140px, var(--holo-showcase-mobile-size, 44vmin), 340px);
    opacity: var(--holo-showcase-mobile-opacity, 0.32);
  }
}

@media (prefers-reduced-motion: reduce) {
  #app-layers .holo-showcase-assets-layer,
  #app-layers .holo-showcase-assets-item {
    transition: none;
  }
}


/* DSNET HOLO START */
#app-layers .holo-showcase-assets-layer[data-holo-grid-scatter-layer="1"] {
  opacity: 1;
}

#app-layers .holo-showcase-assets-layer[data-holo-grid-scatter-layer="1"] .holo-showcase-assets-item {
  transform:
    translate(-50%, -50%)
    rotate(var(--holo-showcase-rotate, 0deg));
  will-change: transform, opacity;
}

#app-layers .holo-showcase-assets-item[data-holo-grid-scatter-item="1"] {
  width: clamp(120px, var(--holo-showcase-size, 31vmin), 760px);
  min-width: 120px;
}

@media (max-width: 720px) {
  #app-layers .holo-showcase-assets-item[data-holo-grid-scatter-item="1"] {
    width: clamp(76px, var(--holo-showcase-mobile-size, 34vmin), 420px);
  }
}


/* Browser QA repair: public showcase placements must be transparent renderer mounts, not owner preview cards. */
#app-layers .holo-showcase-assets-item.holo-module-mount {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
}
#app-layers .holo-showcase-assets-item .holo-renderer-shell,
#app-layers .holo-showcase-assets-item .holo-renderer-stage,
#app-layers .holo-showcase-assets-item .holo-renderer-canvas {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible;
}
#app-layers .holo-showcase-assets-item .holo-renderer-stage::before {
  content: none !important;
  display: none !important;
}


/* Simple grid-image showcase proof path: places BaseScratchPad images directly on the approved layer. */
#app-layers .holo-showcase-assets-item[data-holo-simple-showcase-image] {
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  overflow: visible !important;
  line-height: 0 !important;
}
#app-layers .holo-showcase-assets-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  opacity: 1;
  pointer-events: none;
  user-select: none;
  border: 0;
  background: transparent;
  box-shadow: none;
}


/* Force-visible BaseScratchPad showcase layer proof path. */
#app-layers[data-holo-showcase-forced-visible="1"],
#app-layers .layer-showcase[data-holo-showcase-forced-visible="1"],
#app-layers .holo-showcase-assets-layer[data-holo-showcase-forced-visible="1"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
}
#app-layers .holo-showcase-assets-layer[data-holo-showcase-status="mounted-simple-base-image"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 40 !important;
}
#app-layers .holo-showcase-assets-layer[data-holo-showcase-status="mounted-simple-base-image"] .holo-showcase-assets-item {
  opacity: 0.96 !important;
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.42));
}
#app-layers .layer .holo-showcase-assets-image,
#app-layers .layer-showcase .holo-showcase-assets-image,
#app-layers .holo-showcase-assets-layer .holo-showcase-assets-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
}


/* Showcase image-only cleanup: preserve source aspect ratio and hide broken/blank placements. */
#app-layers .holo-showcase-assets-item[data-holo-simple-showcase-image] {
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  overflow: visible !important;
  line-height: 0 !important;
}
#app-layers .holo-showcase-assets-item[data-holo-simple-showcase-image][data-holo-image-loaded="0"] {
  visibility: hidden !important;
}
#app-layers .holo-showcase-assets-item[data-holo-simple-showcase-image][data-holo-image-error="1"] {
  display: none !important;
}
#app-layers .holo-showcase-assets-item[data-holo-simple-showcase-image] .holo-showcase-assets-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}


/* Rendered Holo showcase cleanup: only the composed Holo should be visible, with no preview/card box. */
#app-layers .holo-showcase-assets-layer[data-holo-showcase-status="mounted-grid-holo"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 40 !important;
}
#app-layers .holo-showcase-assets-layer[data-holo-showcase-status="mounted-grid-holo"] .holo-showcase-assets-item,
#app-layers .holo-showcase-assets-layer[data-holo-showcase-status="mounted-grid-holo"] .holo-renderer-shell,
#app-layers .holo-showcase-assets-layer[data-holo-showcase-status="mounted-grid-holo"] .holo-renderer-stage,
#app-layers .holo-showcase-assets-layer[data-holo-showcase-status="mounted-grid-holo"] .holo-renderer-canvas {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}
#app-layers .holo-showcase-assets-layer[data-holo-showcase-status="mounted-grid-holo"] .holo-renderer-stage::before,
#app-layers .holo-showcase-assets-layer[data-holo-showcase-status="mounted-grid-holo"] .holo-renderer-hud,
#app-layers .holo-showcase-assets-layer[data-holo-showcase-status="mounted-grid-holo"] .holo-renderer-notes {
  content: none !important;
  display: none !important;
}

/* Hide failed/pending renderer mounts so resizing never exposes empty square boxes. */
#app-layers .holo-showcase-assets-layer[data-holo-showcase-status="mounted-grid-holo"] .holo-showcase-assets-item[data-holo-render-mounted="0"],
#app-layers .holo-showcase-assets-layer[data-holo-showcase-status="mounted-grid-holo"] .holo-showcase-assets-item[data-holo-render-error="1"] {
  display: none !important;
  visibility: hidden !important;
}
#app-layers .holo-showcase-assets-layer[data-holo-showcase-status="mounted-grid-holo"] .holo-showcase-assets-item.holo-module-mount {
  min-height: 0 !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}



/* List-only/stable showcase cleanup: no visible loading/status text or pending boxes on approved layers. */
#app-layers .holo-showcase-assets-layer .holo-renderer-hud,
#app-layers .holo-showcase-assets-layer .holo-renderer-notes,
#app-layers .holo-showcase-assets-layer .holo-renderer-status,
#app-layers .holo-showcase-assets-layer .holo-renderer-stage::before {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
}
#app-layers .holo-showcase-assets-layer .holo-showcase-assets-item[data-holo-render-pending="1"],
#app-layers .holo-showcase-assets-layer .holo-showcase-assets-item[data-holo-render-mounted="0"],
#app-layers .holo-showcase-assets-layer .holo-showcase-assets-item[data-holo-render-error="1"] {
  display: none !important;
  visibility: hidden !important;
}
#app-layers .holo-showcase-assets-layer[data-holo-showcase-status="disabled-empty-payload"],
#app-layers .holo-showcase-assets-layer[data-holo-showcase-status="disabled-zero-density"] {
  opacity: 0 !important;
  visibility: hidden !important;
}