/* v2-anatomy.css: scene 3, "Five layers, one window." Tokens come from index.html :root only.
   Default rules style the static state (no JS, reduced motion, under 800px): copy, the real render and
   the five labels, no pin. The motion layout below is keyed to .anatomy.scrub, the class the Tenant engine puts
   on the section while it is pinned, so a scene that falls back to static (drawings not fetchable) is static again.
   Sticky-stage rule: nothing in this file puts transform, filter, perspective, contain or a non-visible
   overflow on an ancestor of .scrub__stage. Perspective and transforms live on descendants of the stage. */

/* ---- static state ---- */
.anatomy-grid.sec { padding-block: clamp(32px, 2.8vw, 40px); }
.anatomy-grid {
  display: grid; align-items: start;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: auto auto 1fr;
  grid-template-areas: "head head" "lede frame" "labels frame";
  column-gap: clamp(32px, 5vw, 64px);
}
.anatomy-grid h2 { grid-area: head; }
.anatomy__lede { grid-area: lede; margin-top: 24px; max-width: var(--measure); color: var(--text); font-size: 1.0625rem; line-height: 1.55; text-wrap: pretty; }
.anatomy__w { color: rgba(244, 244, 245, .5); }

.anatomy__labels { grid-area: labels; display: grid; gap: 12px; margin-top: 24px; }
.anatomy__label { position: relative; padding-left: 20px; font-size: .875rem; line-height: 1.45; }
.anatomy__label::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 2px; background: var(--blue); }
.anatomy__label strong { display: block; color: var(--text); font-size: .9375rem; font-weight: 600; }
.anatomy__label span { display: block; margin-top: 2px; color: var(--muted); text-wrap: pretty; }

.anatomy__frame { grid-area: frame; align-self: center; position: relative; }
.anatomy__stack { position: relative; }
.anatomy__render {
  width: 100%; height: auto; border-radius: var(--r-md);
  outline: 1px solid rgba(255, 255, 255, .1); outline-offset: -1px; background: var(--panel);
}

@media (max-width: 899px) {
  .anatomy-grid.sec { padding-block: 48px; }
  .anatomy-grid {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: none;
    grid-template-areas: "head" "lede" "frame" "labels"; row-gap: 0;
  }
  .anatomy__frame { margin-top: 28px; }
  .anatomy__labels { margin-top: 28px; }
}

/* ---- motion layout: the grid is the sticky stage's one child ----
   Wide screens: copy on the left, the frame on the right, both centred in the stage. --fw is the frame's width:
   what the grid leaves after the copy column, capped so the lifted stack (about 0.91 of the frame width tall)
   fits the viewport height. The label list moves into the frame at mount, so every label slot is a share of
   the frame's width (--x) and height (--y) and follows the frame at every size. */
.anatomy.scrub .anatomy-grid {
  --copy-w: clamp(260px, 25vw, 360px); --gap: clamp(24px, 5.5vw, 80px);
  --vw: 100vw; --gw: min(var(--vw) - 2 * var(--gutter), 1200px);
  --fl: calc(var(--copy-w) + var(--gap));
  --fw: min(calc(var(--gw) - var(--fl)), calc((100dvh - 175px) * 1.08)); --fh: calc(var(--fw) / 1.6);
  --lw: clamp(180px, 18vw, 260px); --rw: clamp(140px, 11vw, 160px);
  position: relative; height: 100%; padding-block: 72px 24px;
  justify-content: start; align-items: start; column-gap: var(--gap);
  grid-template-columns: var(--copy-w) var(--fw);
  grid-template-rows: calc((100% - var(--fh)) / 2) auto 1fr; /* the copy starts level with the frame's top edge */
  grid-template-areas: none;
}
.anatomy.scrub .anatomy-grid h2 { grid-area: 2 / 1 / 3 / 2; }
.anatomy.scrub .anatomy__lede { grid-area: 3 / 1 / 4 / 2; }
.anatomy.scrub .anatomy__frame { grid-area: 1 / 2 / 4 / 3; align-self: center; margin-top: 0; aspect-ratio: 1440 / 900; perspective: 2800px; }
.anatomy.scrub .anatomy__stack { position: absolute; inset: 0; transform-style: preserve-3d; }
/* the empty window: a plate and a hairline rim, so the frame reads before anything is drawn */
.anatomy.scrub .anatomy__stack::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--r-md);
  background: var(--panel); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  transform: translateZ(-2px);
}
.anatomy.scrub .anatomy__render { position: absolute; inset: 0; height: 100%; opacity: 0; transform: translateZ(-1px); }
.anatomy.scrub .anatomy__layer { position: absolute; inset: 0; color: rgba(161, 161, 170, .7); pointer-events: none; }
.anatomy.scrub .anatomy__layer svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
.anatomy.scrub .anatomy__layer path { stroke-dasharray: 1 1; stroke-dashoffset: var(--d, 1); }
.anatomy.scrub .anatomy__anchor { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; pointer-events: none; }
.anatomy.scrub[data-armed="true"] .anatomy__stack,
.anatomy.scrub[data-armed="true"] .anatomy__layer { will-change: transform; }

/* labels: left ones sit outside the pile, right-aligned to their leader. Right ones sit in the two empty
   corners of the pile, or outside it on the right when the screen is wide enough for that. */
.anatomy.scrub .anatomy__labels { position: absolute; inset: 0; display: block; margin: 0; pointer-events: none; z-index: 3; }
.anatomy.scrub .anatomy__label {
  position: absolute; width: var(--rw); padding-left: 0; opacity: 0; font-size: .875rem; line-height: 1.45;
  left: calc(var(--x) * 100%); top: calc(var(--y) * 100%);
}
.anatomy.scrub .anatomy__label::before { display: none; }
.anatomy.scrub .anatomy__label[data-layer="rail"],
.anatomy.scrub .anatomy__label[data-layer="layers"],
.anatomy.scrub .anatomy__label[data-layer="canvas"] { --x: -.118; width: var(--lw); margin-left: calc(var(--lw) * -1); text-align: right; }
.anatomy.scrub .anatomy__label[data-layer="rail"]      { --y: .66; }
.anatomy.scrub .anatomy__label[data-layer="layers"]    { --y: .905; }
.anatomy.scrub .anatomy__label[data-layer="canvas"]    { --y: 1.145; }
.anatomy.scrub .anatomy__label[data-layer="inspector"] { --x: .757; --y: -.065; }
.anatomy.scrub .anatomy__label[data-layer="file"]      { --x: .763; --y: .987; }
/* wide, short screens: the pile is height-limited and narrow, so all three right labels sit outside it on the right */
@media (min-width: 1200px) and (min-aspect-ratio: 17/10) {
  .anatomy.scrub .anatomy-grid { --rw: max(140px, min(200px, calc(var(--vw) / 2 + var(--gw) / 2 - 56px - var(--fl) - .98 * var(--fw)))); }
  .anatomy.scrub .anatomy__label[data-layer="inspector"],
  .anatomy.scrub .anatomy__label[data-layer="file"],
  .anatomy.scrub .anatomy__label[data-layer="canvas"] { --x: 1.03; width: var(--rw); margin-left: 0; text-align: left; }
  .anatomy.scrub .anatomy__label[data-layer="inspector"] { --y: .2; }
  .anatomy.scrub .anatomy__label[data-layer="file"]      { --y: .63; }
  .anatomy.scrub .anatomy__label[data-layer="canvas"]    { --y: .95; }
}

/* narrower screens: the copy sits above, the frame is centred below it, and all five labels sit outside the pile:
   rail and layers on the left, inspector, file and canvas on the right */
@media (max-width: 1199px) {
  .anatomy.scrub .anatomy-grid {
    --fw: min(48vw, calc((100dvh - 340px) / .905));
    --lw: clamp(110px, calc(var(--vw) / 2 - .618 * var(--fw) - 28px), 240px);
    --rw: clamp(110px, calc(var(--vw) / 2 - .53 * var(--fw) - 28px), 240px);
    padding-top: 88px; align-content: start; justify-content: stretch;
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto;
  }
  .anatomy.scrub .anatomy-grid h2 { grid-area: 1 / 1; }
  .anatomy.scrub .anatomy__lede { grid-area: 2 / 1; margin-top: 16px; }
  .anatomy.scrub .anatomy__frame { grid-area: 3 / 1; align-self: start; width: var(--fw); margin: calc(var(--fw) * .115 + 16px) auto 0; }
  .anatomy.scrub .anatomy__label[data-layer="inspector"],
  .anatomy.scrub .anatomy__label[data-layer="file"],
  .anatomy.scrub .anatomy__label[data-layer="canvas"] { --x: 1.03; width: var(--rw); margin-left: 0; text-align: left; }
  .anatomy.scrub .anatomy__label[data-layer="inspector"] { --y: .2; }
  .anatomy.scrub .anatomy__label[data-layer="file"]      { --y: .63; }
  .anatomy.scrub .anatomy__label[data-layer="canvas"]    { --y: .95; }
}

/* leader lines: one 2D overlay over the stage */
.anatomy.scrub .anatomy__leaders { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none; z-index: 2; }
.anatomy.scrub .anatomy__leader { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.anatomy.scrub .anatomy__dot { fill: var(--blue); opacity: 0; }