/* The Lectern — fixed definition strip (replaces floating term popovers).
   Law: brief/master-prompt.md §4. Consumed with shared/tokens.css.

   The lectern is a PERMANENT ruled region at the foot of the page — the same
   night as the page ground, veiled darker toward the bottom edge, separated
   from the page by the 1px ivory-faint top rule only. It never pops in or
   out; only its CONTENT changes. A definition materialises like light from
   darkness (.is-lit, ~0.9s); when attention leaves, it SEQUENCES back to
   the ambient ground: the text fades fully to black first (~2.2s, .is-waning
   holds the ambient dark), then a beat of pure darkness, then the form
   materialises (JS-chained in lectern.js — never a crossfade). */

.lectern {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  min-height: 140px;
  /* Mid-hover safety cap: even the longest definition (~840 chars) must
     never swallow more than a bit over a third of the viewport. Scrolls
     inside rather than growing further. The ≤700px media query below
     overrides this with its own, smaller cap. */
  max-height: 38vh;
  overflow-y: auto;
  border-top: 1px solid var(--ivory-faint);
  /* Same night as the page: --ground under the plates' veil-style darkening.
     No backdrop blur — a ruled region of the page, not a panel over it. */
  background:
    linear-gradient(to bottom, rgba(8, 5, 4, 0), rgba(8, 5, 4, .85)),
    var(--ground);
  /* Thin, quiet scrollbar — an engraving-register rule, not a chunky
     default OS scrollbar. */
  scrollbar-width: thin;
  scrollbar-color: var(--ivory-faint) transparent;
}

.lectern::-webkit-scrollbar {
  width: 6px;
}

.lectern::-webkit-scrollbar-track {
  background: transparent;
}

.lectern::-webkit-scrollbar-thumb {
  background-color: var(--ivory-faint);
  border-radius: 3px;
}

/* AMBIENT — the Cabinet of Forms canvas (star drift as fallback; see
   lectern.js). Forward direction (approved): fades out under the
   materialising text, concurrently. Return direction: held at opacity 0 by
   .is-waning while the definition fades and through the darkness beat; only
   then does JS release it, and it comes back over ~3s (the star-drift
   fallback's whole materialise; the cabinet's forms build depth-first on a
   canvas that starts empty, so this fade never reads as a crossfade). */
.lectern__ambient {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 1;
  transition: opacity 3000ms var(--ease);
}

.lectern.is-lit .lectern__ambient,
.lectern.is-waning .lectern__ambient {
  opacity: 0;
  transition: opacity 900ms var(--ease);
}

/* The content: hidden by default; materialises 0.9s ease-out (opacity + a
   slight blur clearing — DO NOT touch), fades away over 2.2s when attention
   leaves (same ease family; the ambient waits for it, see lectern.js). */
.lectern__inner {
  position: relative;
  max-width: var(--site-max);
  margin: 0 auto;
  padding: var(--sp-2) var(--sp-3);
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: var(--sp-3);
  align-items: baseline;
  opacity: 0;
  filter: blur(2px);
  transition: opacity 2200ms ease-out, filter 2200ms ease-out;
}

.lectern.is-lit .lectern__inner {
  opacity: 1;
  filter: blur(0);
  transition: opacity 900ms ease-out, filter 900ms ease-out;
}

.lectern__term {
  margin: 0;
  font: 600 var(--fs-m)/1.15 var(--serif);
  color: var(--ivory);
}

.lectern.is-gold .lectern__term {
  color: var(--gold);
}

.lectern__body {
  margin: 0;
  font: 400 var(--fs-s)/1.48 var(--serif);
  /* Primary reading content, held near the essay body's standard rather
     than the general --ivory-dim token (.62) shared with lesser chrome. */
  color: rgba(242, 231, 203, .70);
  max-width: 72ch;
}

.lectern__source {
  display: block;
  margin-top: 4px;
  font: 600 var(--fs-xs)/1.35 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ivory-faint);
}

@media (max-width: 700px) {
  .lectern {
    min-height: 112px;
  }

  .lectern__inner {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: var(--sp-2);
  }

  .lectern__body {
    font-size: .84rem;
  }

  /* Cap height on small screens; the entry scrolls inside if long. */
  .lectern {
    max-height: 42svh;
    overflow-y: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lectern__inner,
  .lectern.is-lit .lectern__inner {
    filter: none;
    transition: opacity 200ms ease-out;
  }

  .lectern__ambient,
  .lectern.is-lit .lectern__ambient,
  .lectern.is-waning .lectern__ambient {
    transition: opacity 200ms ease-out;
  }
}