---
// The page's own resource running out, ambiently — not a progress bar
// addressed to the visitor ("you're 40% through!"), just a meter that fills
// as the page's own context window would, and sections that have scrolled
// by quietly fold themselves up the way a real context window compacts.
// Unexplained on purpose; nothing here says "this represents the page's
// context budget" anywhere a visitor can read.
//
// Used only on the atmosphere pages (home, features, architecture,
// about, 404) via AtmosphereLayout — the hospitality pages (docs, /api/,
// get-started, the launch-required pages) stay plain, per the site's one
// rule about where strangeness is allowed to live.
//
// Fully inert with JS off: `hidden` by default, and only ever un-hidden by
// the script below, so a no-JS visitor never sees a bar stuck at zero.
// Sections marked `data-compactable` render fully open regardless — nothing
// here removes content from the document, it only toggles a CSS class that
// visually folds it.
---
<div class="context-meter" hidden>
  <div class="context-meter-fill"></div>
</div>

<script>
  const meter = document.querySelector<HTMLElement>(".context-meter");
  const fill = document.querySelector<HTMLElement>(".context-meter-fill");
  const sections = Array.from(document.querySelectorAll<HTMLElement>("[data-compactable]"));
  if (meter && fill) {
    meter.hidden = false;

    // Once the meter is past this point, a section fully scrolled above the
    // viewport folds. Below it, everything stays open — early in a session
    // there is nothing yet worth compacting.
    const COMPACT_THRESHOLD = 0.55;

    function update() {
      const doc = document.documentElement;
      const scrollable = doc.scrollHeight - doc.clientHeight;
      const depth = scrollable > 0 ? Math.min(1, doc.scrollTop / scrollable) : 0;
      fill!.style.width = `${(depth * 100).toFixed(1)}%`;

      if (depth > COMPACT_THRESHOLD) {
        for (const section of sections) {
          const rect = section.getBoundingClientRect();
          if (rect.bottom < 0) {
            section.classList.add("compacted");
          }
        }
      }
    }

    window.addEventListener("scroll", update, { passive: true });
    update();

    for (const section of sections) {
      const summary = section.querySelector<HTMLElement>("[data-summary-label]");
      summary?.addEventListener("click", () => {
        section.classList.remove("compacted");
      });
    }
  }
</script>

<style>
  .context-meter {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 10;
    background: transparent;
  }
  .context-meter-fill {
    height: 100%;
    width: 0%;
    background: var(--accent);
    opacity: 0.55;
    transition: width 80ms linear;
  }

  /* Collapsed state: every child of the section hides except the one-line
     summary, which switches on. Nothing here removes content from the
     document — a no-JS visitor, or one who never scrolls past the
     threshold, sees every child exactly as authored. */
  [data-summary-label] {
    display: none;
    cursor: pointer;
    color: var(--ink-dim);
    font-size: 0.9em;
    padding: 4px 0;
  }
  [data-compactable].compacted > * {
    display: none;
  }
  [data-compactable].compacted > [data-summary-label] {
    display: block;
  }
</style>