/* Deployment overrides — loaded AFTER the prototype's styles.css.
   Site-specific adjustments live here so Fable's source stays untouched. */

/* The cosmogram's "From the record" panel auto-features the latest-dated
   episode (a frame-primitive demo host). On the live home that surfaces
   arbitrary/unfinished content; hidden until it becomes a curated feature. */
.cosmo-panel { display: none !important; }

/* Embedded, styles.css gives the root height:100% - which collapses unless an
   ancestor has a real height. The theme rarely provides one, so grant the root
   a concrete viewport-tall box here. In normal page flow it sits BELOW the site
   header (no overlap), and its absolute layers fill it. For true full-bleed
   width, place the shortcode on a full-width / blank page template. */
#mythica-lens-root { height: 100vh; min-height: 560px; width: 100%; }

/* -- the GPU frame: the compositor paints inside, the name stays DOM ------ */
.mf-frame.mf-gpu { position: relative; overflow: hidden; min-height: 200px; }
.mf-frame.mf-gpu .mf-gpu-name {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
	padding: 10px 12px;
	font: 500 15px/1.2 "Cormorant Garamond", Georgia, serif;
	color: #f0e2c4; text-shadow: 0 2px 10px rgba(0,0,0,.7);
	background: linear-gradient(to top, rgba(6,7,13,.62), transparent);
	pointer-events: none;
}

/* -- THE AKASHIC MIRROR: the whole web in one mist ----------------------- */
#akashi-mirror {
	position: absolute; inset: 0; z-index: 6;
	animation: mirror-in .9s ease both;
}
@keyframes mirror-in { from { opacity: 0; } to { opacity: 1; } }
#akashi-mirror .mirror-legend {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
	padding: 14px 18px 16px;
	font: 400 12px/1.6 ui-sans-serif, system-ui;
	color: #cfc3ab;
	background: linear-gradient(to top, rgba(6,7,13,.78), transparent);
	pointer-events: none;
}
#akashi-mirror .mirror-legend strong { color: #e8c47a; font-weight: 600; }
#akashi-mirror .mirror-legend em { color: #8a8172; font-style: normal; }
#akashi-mirror .mirror-names {
	display: block; margin-top: 4px;
	font: 400 13px/1.5 "Cormorant Garamond", Georgia, serif; 
	color: #a99a80;
}
#akashi-mirror .mirror-close {
	position: absolute; top: 12px; right: 14px; z-index: 3;
	width: 30px; height: 30px; border-radius: 50%;
	background: rgba(6,7,13,.5); color: #e8c47a;
	border: 1px solid rgba(232,196,122,.32);
	font: 300 17px/1 ui-sans-serif; cursor: pointer;
}
#akashi-mirror .mirror-close:hover { background: rgba(232,196,122,.16); }

/* -- SHOW ME THAT: one thing, arrived -----------------------------------
   The integrated frame. A film, an image, a figure or an episode pulled into
   the canvas by ⟨mythica:show …⟩ and rendered through frame.js, so the
   treatment is derived from the record rather than chosen here — the
   well-written arrive clear and the unwritten stay misted.

   It reuses #akashi-mirror's slot deliberately: one thing on the canvas at a
   time. Asking for something new replaces what is there rather than stacking. */
/* THE SHELF — every photograph carrying a term.
   Plain on purpose: a grid, a name, a count. The treatment is a looking
   decision and belongs to Peter once he can see real tagged media land. */
#akashi-mirror.akashi-shelf {
  position: absolute; inset: 0; z-index: 40;
  display: flex; flex-direction: column;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(7, 11, 26, .72);
  backdrop-filter: blur(10px);
  overflow: auto;
}
#akashi-mirror.akashi-shelf .shelf-head {
  color: #e8c47a; font-family: Cormorant, Georgia, serif;
  font-size: clamp(1.1rem, 2.4vw, 1.7rem);
  letter-spacing: .04em; margin: 0 0 .8em;
}
#akashi-mirror.akashi-shelf .shelf-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
#akashi-mirror.akashi-shelf .shelf-item { margin: 0; }
#akashi-mirror.akashi-shelf .shelf-item img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 3px; display: block;
  border: 1px solid rgba(232, 196, 122, .22);
}
#akashi-mirror.akashi-shelf .shelf-item figcaption {
  color: rgba(214, 221, 244, .72); font-size: .74rem;
  margin-top: .35em; line-height: 1.25;
}

#akashi-mirror.akashi-showing {
	display: flex; align-items: center; justify-content: center;
	background: radial-gradient(ellipse at center, rgba(10,8,26,.55), rgba(6,7,13,.86));
	backdrop-filter: blur(2px);
}
.akashi-show-stage {
	width: min(760px, 82%); max-height: 78%;
	display: flex; align-items: center; justify-content: center;
	animation: show-rise 1.1s cubic-bezier(.16,.8,.3,1) both;
}
/* rises out of the mist rather than appearing on top of it */
@keyframes show-rise {
	from { opacity: 0; transform: translateY(26px) scale(.97); filter: blur(6px); }
	to   { opacity: 1; transform: none; filter: none; }
}
.akashi-show-stage > * { width: 100%; }
.akashi-show-stage .mf-video-el,
.akashi-show-stage .mf-media img { width: 100%; border-radius: 12px; display: block; }