/* class.show.css — PresentationShow (UI/class.show.js): full-bleed scene +
   counsel presentation engine. Extracted from Systems/Zelf/zelf.css
   (2026-07-10 deep review) so Zelf and Publon.Press presentation blocks
   share one source. Theme via the --z-* vars below — a consumer page or
   system theme can override them (Zelf's own palette IS these defaults). */

:root {
  --z-night: #0b1622;
  --z-teal: #12313a;
  --z-gold: #e8b04b;
  --z-amber: #f2d49b;
  --z-crimson: #a63a2e;
  --z-ink: #e9e2d2;
  --z-ink-dim: #b8ae97;
  --z-serif: 'Iowan Old Style', 'Palatino', 'Georgia', serif;
}

/* Scoped to .z-app (the show's own root), not a blanket `body` rule — the
 * engine also mounts embedded (a pageframe tab, a book-page overlay), where
 * body is the host app's chrome. Standalone pages put class="z-app" on body. */
.z-app {
  background: var(--z-night);
  color: var(--z-ink);
  font-family: var(--z-serif);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---- stage: full-bleed scene with a readable scrim ---- */

.z-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  background-image:
    linear-gradient(to top, rgba(11, 22, 34, 0.92) 0%, rgba(11, 22, 34, 0.45) 34%, rgba(11, 22, 34, 0.08) 60%),
    var(--z-scene);
  background-size: cover;
  background-position: center top;
}

.z-hero { min-height: 86vh; }

.z-panel {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-width: 46rem;
  padding: 3rem 3.2rem 2.6rem;
}

.z-phase {
  font-size: 0.82rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--z-gold);
}

.z-name {
  /* explicit, not inherited: it's an <h1>, and class.ui.css's global
   * `h1,h2,...{font-family:var(--ui-font-heading)}` rule directly matches
   * the tag, which beats an inherited value from .z-app regardless of that
   * rule's low specificity. */
  font-family: var(--z-serif);
  font-size: 2.6rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--z-amber);
}

.z-counsel {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.z-line {
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--z-ink);
  text-shadow: 0 1px 8px rgba(11, 22, 34, 0.85);
}

.z-act {
  align-self: flex-start;
  border-left: 3px solid var(--z-crimson);
  padding: 0.55rem 1rem;
  font-size: 1rem;
  font-style: italic;
  color: var(--z-amber);
  background: rgba(11, 22, 34, 0.55);
}

/* ---- bottom bar: nav (+ consumer-supplied lead content) ---- */

.z-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.75rem 3.2rem;
  background: var(--z-night);
  border-top: 1px solid rgba(232, 176, 75, 0.25);
}

.z-chip {
  font-family: var(--z-serif);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--z-ink-dim);
  background: transparent;
  border: 1px solid rgba(184, 174, 151, 0.4);
  border-radius: 999px;
  padding: 0.32rem 0.95rem;
  cursor: pointer;
}

.z-chip-done {
  color: var(--z-night);
  background: var(--z-gold);
  border-color: var(--z-gold);
}

.z-nav { display: flex; gap: 1.3rem; align-items: center; }

.z-link {
  font-size: 0.88rem;
  letter-spacing: 0.1em;
  color: var(--z-ink-dim);
  text-decoration: none;
}

.z-link:hover { color: var(--z-amber); }

.z-link-active {
  color: var(--z-gold);
  border-bottom: 1px solid var(--z-gold);
  padding-bottom: 2px;
}

/* ---- thumbnail strip: jump points within the current section ---- */

.z-strip {
  display: flex;
  gap: 0.45rem;
  padding: 0.6rem 3.2rem;
  overflow-x: auto;
  background: var(--z-night);
}

.z-strip-img {
  height: 3.4rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid rgba(232, 176, 75, 0.25);
  opacity: 0.55;
  cursor: pointer;
}

.z-strip-img:hover { opacity: 0.85; }

.z-strip-active {
  opacity: 1;
  border-color: var(--z-gold);
}

/* ---- idle: chrome fades until the mouse moves ---- */

.z-bar, .z-strip { transition: opacity 0.5s ease; }

.z-idle .z-bar,
.z-idle .z-strip {
  opacity: 0;
  pointer-events: none;
}

.z-idle { cursor: none; }

/* ---- contents overlay ---- */

.z-toc {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  overflow-y: auto;
  padding: 1.6rem 3.2rem 2.2rem;
  background: rgba(11, 22, 34, 0.96);
  color: var(--z-ink);
  font-family: var(--z-serif);
}

.z-toc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  border-bottom: 1px solid rgba(232, 176, 75, 0.25);
  padding-bottom: 0.8rem;
}

.z-toc-title {
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  color: var(--z-amber);
}

.z-toc-options {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.z-toc-label {
  font-size: 0.85rem;
  color: var(--z-ink-dim);
}

.z-toc-input {
  width: 3.6rem;
  font-family: var(--z-serif);
  font-size: 0.9rem;
  color: var(--z-ink);
  background: transparent;
  border: 1px solid rgba(184, 174, 151, 0.4);
  border-radius: var(--z-radius, 4px);
  padding: 0.25rem 0.4rem;
  text-align: center;
}

.z-toc-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.9rem;
}

a.z-toc-today { text-decoration: none; }

.z-toc-today {
  align-self: flex-start;
  font-family: var(--z-serif);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  color: var(--z-gold);
  background: transparent;
  border: 1px solid rgba(232, 176, 75, 0.4);
  border-radius: 999px;
  padding: 0.45rem 1.2rem;
  cursor: pointer;
}

.z-toc-today:hover { background: rgba(232, 176, 75, 0.12); }

.z-toc-section { margin-top: 1.1rem; }

.z-toc-deity {
  font-size: 0.82rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--z-gold);
}

.z-toc-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.55rem;
}

.z-toc-card {
  flex: 0 1 12.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  border: 1px solid transparent;
  padding: 0.35rem;
  cursor: pointer;
}

.z-toc-card:hover { border-color: rgba(232, 176, 75, 0.5); }

.z-toc-current { border-color: var(--z-gold); }

.z-toc-img {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.z-toc-cap {
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--z-ink-dim);
  font-style: italic;
}

/* ---- embedded poster + launch overlay (Publon.Press presentation block) ---- */

.z-show-poster {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 16rem;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background-image:
    linear-gradient(to top, rgba(11, 22, 34, 0.9) 0%, rgba(11, 22, 34, 0.35) 45%, rgba(11, 22, 34, 0.05) 70%),
    var(--z-scene);
  background-size: cover;
  background-position: center;
  background-color: var(--z-night);
  color: var(--z-ink);
  font-family: var(--z-serif);
}

.z-show-poster-panel {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.2rem 1.4rem 1rem;
}

.z-show-poster-title {
  font-size: 1.5rem;
  color: var(--z-amber);
  letter-spacing: 0.04em;
}

.z-show-poster-sub {
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--z-gold);
}

.z-show-poster-play {
  align-self: flex-start;
  margin-top: 0.4rem;
}

.z-show-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--z-night);
  display: flex;
  flex-direction: column;
}

.z-show-overlay > .z-app { flex: 1; min-height: 0; }

.z-show-close {
  position: fixed;
  top: 0.9rem;
  right: 1.1rem;
  z-index: 1001;
}

@media (max-width: 700px) {
  .z-panel { padding: 2rem 1.4rem 1.8rem; }
  .z-bar, .z-strip, .z-toc { padding-left: 1.4rem; padding-right: 1.4rem; }
  .z-name { font-size: 2rem; }
}