/* ==========================================================================
   La Flora — Explore page graph surface

   Scoped stylesheet, loaded only by custom-explore.hbs. It exists because
   style.css is owned by other work right now; everything here is namespaced
   under .lf-explore-page--graph so it cannot reach any other page.

   ---------------------------------------------------------------------------
   THE FRAME IS THE WINDOW (Leonardo, 2026-08-21, second ruling)

   The previous version obeyed "make the graph bigger than the window" by
   breaking the canvas out to 100vw — which meant dots and labels rendered to
   the LEFT and RIGHT of the page's 2px border, floating in the margin with
   nothing holding them. His correction: "we must make sure the border block is
   the actual container. As it is, the graph is overflowing the block's edges."

   So the bordered .lf-explore-page box is now the physical container. The
   graph bleeds outward only as far as the INSIDE of that border — it eats the
   frame's own padding (left / right / bottom) and stops dead. The world is
   still far larger than the box; you reach the rest of it by panning, which is
   the point. Nothing spills.

   Containment is enforced in three independent places, because one of them
   failing silently is how the last version shipped wrong:
     1. .lf-explore-page--graph   overflow:hidden — the frame itself crops.
     2. .lf-explore-graph         overflow:hidden — the window crops.
     3. graph-view.js             a canvas clip path, radius-aware.
   ========================================================================== */

.lf-explore-page--graph {
  position: relative;
  /* The frame crops its own contents. Nothing inside can paint over the
     border. (.lf-collapse sits at top:16px/right:24px, comfortably inside,
     so it is unaffected.) */
  overflow: hidden;
}

/* The window into the graph world.

   Not full-bleed any more. `width: calc(100% + 2 * padding)` with matching
   negative margins takes it out to the inner edge of the frame's border and
   no further — flush on the left, the right, and the bottom, so the border
   reads as the window's own edge rather than as a box with a graph loose
   around it. The title keeps its space above. */
.lf-explore-page--graph .lf-explore-graph {
  position: relative;
  width: calc(100% + (var(--space-lg) * 2));
  margin-left: calc(var(--space-lg) * -1);
  margin-right: calc(var(--space-lg) * -1);
  margin-bottom: calc(var(--space-lg) * -1);
  /* Fill what's left of the window under the masthead and the title, with a
     floor so it never collapses on a short screen. 12rem accounts for the
     masthead, the frame's own margin + border + padding, and the title row. */
  height: clamp(420px, calc(100vh - 12rem), 1100px);
  overflow: hidden;
  /* The canvas is the interaction surface; stop the browser from offering a
     text selection I-beam over it while dragging. */
  user-select: none;
  -webkit-user-select: none;
}

/* style.css gives .lf-graph-view--full a 70vh height of its own. Inside this
   window that would leave a dead strip at the bottom AND — worse — make the
   canvas a different size from the box that crops it, which is precisely the
   kind of mismatch that lets things look like they escaped. Here the graph
   div IS the window. */
.lf-explore-page--graph .lf-explore-graph .lf-graph-view--full {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.lf-explore-page--graph .lf-explore-graph canvas {
  display: block;
  /* THE FINGERS BELONG TO THE GRAPH, HERE AND ONLY HERE.
     Without this the browser claims every touch on the canvas: a drag scrolls
     the page instead of panning the world, and a pinch zooms the PAGE — which
     is why Leonardo could pinch in but never back out (page zoom stops at
     100%) and why panning "only worked up to the area of the initial page
     load". Measured before the fix: pinching moved visualViewport 1 → 5 while
     the graph's own scale never left 1.35.
     Scoped to this canvas. The masthead and title above it and the footer
     below it keep normal browser scrolling, so the page is still reachable —
     and the homepage teaser's canvas is untouched, so the homepage scrolls
     exactly as it did. */
  touch-action: none;
}

/* There is no instruction line. There was one — a small uppercase "drag to
   move · scroll to zoom · click a dot, then again to open" pinned bottom-left
   — and Leonardo removed it on 2026-08-21. Its rules (.lf-explore-graph__hint,
   .is-touched) and the little script that retired it on first touch are all
   gone with it; nothing else referenced them. */

@media (max-width: 700px) {
  .lf-explore-page--graph .lf-explore-graph {
    height: clamp(380px, calc(100vh - 10rem), 900px);
  }
}