/* ═══════════════════════════════════════════════════════════════
   anatomy2.html only — reconciles experiment.css with the v2 shell.

   experiment.css is loaded first for the skeleton, nerves, x-ray and info
   panels. v2.css loads after and wins on :root / html / body, which retints
   everything that uses var(--accent) etc. This file covers the rest:

     1. layout — the old page had no nav or footer, so .page assumed the
        full viewport
     2. the handful of colours hardcoded as hex in experiment.css rather
        than as variables
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. layout ── */
.page {
  min-height: auto;                 /* was 100vh, before there was a nav+footer */
  /* Wider than the site's --maxw (1080px). Every other page is a single column
     of prose, where 1080 is about right for line length. This one is a diagram
     beside a panel, and at 1080 on a 1920 screen it left 420px empty on BOTH
     sides while the text column was squeezed to 349px. Two columns need more
     room than one. */
  max-width: min(1240px, 100% - 32px);
  margin: 0 auto;
  padding: 48px 24px 20px;
  gap: 32px;
  align-items: flex-start;
}
.body-panel { background: none; }   /* the v2 background stack shows through */
.info-panel {
  background: none;
  /* No divider. experiment.css draws a border-left here, which made sense when
     this was a two-pane app shell with a filled panel — the line was the edge of
     a surface. On the v2 page both sides are transparent over the same
     background, so it was a rule floating in space between two columns that the
     gap already separates. (The mobile block below already removed it; this just
     stops making the exception.) */
  border-left: none;
}

/* The title row is just the h1 now — the X-Ray pill moved into the right panel.
   Kept as a rule because the markup's inline flex-direction is gone. */
.title-row { flex-direction: column; gap: 12px; }

/* Figure offset. Half of the -30px the markup used to carry inline.
   Gap measured between the "Hover over a limb…" line and the top of the first
   X-Ray label, at 1500px wide:
       -30px (original inline)  14px   squeezed against the copy
         0px                    48px   too far down
       -15px                    33px   here
   Declared BEFORE the max-width:900px block, which overrides it with a margin
   shorthand — the figure is fluid on a phone, so it needs its own value. */
.human-container { margin-top: -15px; }

/* X-Ray toggle + its helper line, the first row of the right-hand panel. It
   belongs with what it switches: the panel is the thing that swaps between agent
   info and X-Ray info.
   .info-panel is a flex column (experiment.css), so the row would otherwise
   stretch to the full column width — align-self keeps it its own size. */
.info-panel .xray-row {
  display: flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
  flex: 0 0 auto;
  margin-bottom: 22px;
}
.info-panel .xray-pill {
  flex: 0 0 auto;
  margin-bottom: 0;
}
/* Deliberately quiet: it explains a control, it is not content. Wraps to two
   short lines in the narrow column rather than pushing the pill around. */
.xray-help {
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--text-dim);
  max-width: 16ch;
}
/* Under 900px the panel is full width, so there is room for one line. */
@media (max-width: 900px) {
  .xray-help { max-width: none; }
}

/* Only from 900px up — below that the columns stack. */
@media (min-width: 901px) {
  .info-panel {
    /* Was 104px, to drop this column below the title AND the toggle over on the
       left. The toggle is the panel's own first row now, so the offset only has
       to clear the title — any more and the pill floats in dead space. */
    padding-top: 40px;

    /* Undo the app-shell behaviour experiment.css set up for the old page, which
       was a full-viewport two-pane layout with no nav and no footer. There,
       `overflow-y:auto; max-height:100vh; position:sticky` gave the right pane
       its own scroll region, which was correct.
       Inside the v2 shell the page scrolls normally, so that produced TWO
       scrollbars as soon as the panel's content passed the viewport height —
       i.e. the moment you opened X-Ray or selected a limb (measured: 1286px of
       content in a 1000px box). The panel is now just a tall column and the page
       is the only thing that scrolls. */
    overflow: visible;
    max-height: none;
    position: static;

    /* Was a hard 400px, which the 1080px container then squeezed to 349. */
    width: auto;
    flex: 0 0 clamp(360px, 34%, 460px);
  }

  /* The pill used to be positioned over here from inside the left column. It is
     in the right panel's markup now, so no positioning is needed at all. */
}

@media (max-width: 900px) {
  .page { flex-direction: column; padding: 28px 16px 12px; }

  /* experiment.css hard-codes .human-container at 460px with flex-shrink:0 and
     .info-panel at 400px. On a 390px phone the figure was therefore WIDER than
     the screen: it looked off-centre (a 460px box centred in 358px of space
     sticks out both sides, and the parent's padding makes it read as a shift)
     and it created real sideways scroll.

     Safe to make fluid because every limb marker and label is an SVG <text> /
     node inside #bodySvg, so they scale with the artwork instead of being
     px-positioned against the container. Keeping the original 460/620 ratio so
     the few percentage-positioned decorations keep their spots. */
  .human-container {
    width: 100%;
    max-width: 460px;
    height: auto;
    aspect-ratio: 460 / 620;
    flex-shrink: 1;
    /* Positive here, where desktop is negative. The figure is fluid on a phone,
       so the label's y=30 inside a 500x730 viewBox scales down with it: the same
       page measured 26px of gap at 390px against 48px at 1500px, with an extra
       line of copy above it. 4px lands mobile at 30-37px across the range, against desktop 33. */
    margin: 4px auto 0;
  }
  .human-container svg { width: 100%; height: 100%; display: block; }

  .info-panel {
    width: 100%;
    max-width: 100%;
    border-left: none;
    position: static;
    max-height: none;
    padding: 24px 0 0;
  }
  .body-panel { width: 100%; max-width: 100%; padding-left: 0; padding-right: 0; }
}

/* the old page opened with the H1 as the site title; here the nav owns that */
.body-title h1 {
  font-size: clamp(1.9rem, 4vw, 2.5rem) !important;
  letter-spacing: -1.2px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── 1a. X-Ray label size ───────────────────────────────────────────────────
   The labels come down 10%: it stops them reading as chunky next to a thin-line
   skeleton, and it buys a couple of pixels at the top for free, since each box
   shrinks about its own centre so its top edge moves down with it. Measured
   158x66 -> 142x59.
   (The figure's vertical offset is separate, up at .human-container.)

   Done with a transform rather than by rewriting SVG geometry because each node
   is a <rect> plus two <text> elements with hand-placed x/y, across seven nodes;
   scaling the group keeps the text centred (verified: 0px off) and the click
   target intact. transform-box:fill-box is what makes transform-origin resolve
   against the node's own bounding box instead of the SVG viewport origin — so it
   is behind @supports, because without it `center` would resolve to the viewport
   centre and fling every label across the diagram. Browsers that lack it simply
   keep the original size. */
@supports (transform-box: fill-box) {
  .xray-node {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0.9);
  }
}

/* ── 1b. panel typography ───────────────────────────────────────────────────
   experiment.css styles .agent-name / .agent-role / .agent-desc ONLY as
   descendants of .agent-info. The X-Ray blocks reuse the same class names inside
   .xray-info, where nothing matched them at all — so clicking a limb in X-Ray
   rendered its heading and body at the browser default 1rem/1.7 next to 0.84rem
   cards. That is the "font is bigger and different from the rest of the site".

   Both containers are covered here, at the sizes the rest of the v2 site uses
   (they match .anat-intro below, which was already correct). anatomy.css loads
   after experiment.css, so these win at equal specificity.

   Also drops the monospace on .agent-role: experiment.css set JetBrains Mono for
   it, which nothing else in this panel uses. */
.agent-info .agent-icon,
.xray-info .agent-icon{
  font-size:2rem;
  margin-bottom:10px;
}
.agent-info .agent-name,
.xray-info .agent-name{
  font-size:1.12rem;
  font-weight:800;
  letter-spacing:-0.3px;
  margin-bottom:3px;
}
.agent-info .agent-role,
.xray-info .agent-role{
  font-size:0.76rem;
  font-weight:600;
  letter-spacing:0.3px;
  font-family:inherit;
  margin-bottom:14px;
}
.agent-info .agent-desc,
.xray-info .agent-desc{
  font-size:0.84rem;
  color:var(--text-dim);
  line-height:1.65;
  margin-bottom:16px;
}

/* ── 1c. panel cards ────────────────────────────────────────────────────────
   The four blocks in #xray-default (Architecture, At a Glance, …) were inline
   styled with padding:14px and margin-bottom:14px, which read as one dense
   stack, and with four hardcoded rgba tints — one of them rgba(124,92,252),
   the old purple, which ignored the theme completely.

   Now a class: roomier (18px padding, 18px apart, more air under the heading)
   and tinted from the live accent so all three palettes work. */
.anat-card{
  padding:18px;
  border-radius:12px;
  margin-bottom:18px;
  background:color-mix(in srgb, var(--accent) 4%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 13%, transparent);
}
.anat-card:last-child{margin-bottom:0;}
/* The two lower cards were orange/red to set them apart from the two above. */
.anat-card.warn{
  background:rgba(var(--warn-rgb),0.04);
  border-color:rgba(var(--warn-rgb),0.13);
}
.anat-card-h{
  font-size:0.72rem;text-transform:uppercase;letter-spacing:1.2px;font-weight:700;
  color:var(--accent2);margin-bottom:11px;
}
.anat-card-h.warn{color:var(--warn);}
.anat-card p{font-size:0.84rem;color:var(--text-dim);line-height:1.65;margin:0;}
/* the bullet list sat hard against the first card */
.xray-info .anat-principles,
.info-panel .anat-principles{margin-bottom:22px;}

/* ── 2. colours experiment.css hardcodes ── */
:root {
  /* experiment.css uses these three for the nerve/brain/limb accents */
  --nerve: #10b981;
  --brain: #6ee7b7;
  --limb:  #ff9f43;
  --accent-glow: color-mix(in srgb, var(--accent) 16%, transparent);
  --bg: var(--base-1);
  --bg-card: var(--base-2);
  --bg-card-hover: color-mix(in srgb, var(--base-2) 80%, var(--accent) 20%);
}

.xray-pill.active { box-shadow: 0 0 20px color-mix(in srgb, var(--accent2) 16%, transparent); }
.xray-pill:hover  { border-color: color-mix(in srgb, var(--accent2) 34%, transparent); }
.xray-pill.active .xray-toggle-track { background: var(--accent2); }

/* The body fill is hue-shifted into the greens rather than recoloured at the
   source, because the gradient stops live inline in the markup where CSS cannot
   reach them.

   BUT: this used to be one `#bodySvg image { filter: hue-rotate(...) }` rule, and
   a CSS filter REPLACES the `filter="url(#…)"` presentation attribute rather than
   adding to it. Both images carry one:

     .body-silhouette image      filter="url(#bodyColorize)"   grey -> invert -> tint
     .body-silhouette-glow image filter="url(#bodyEdgeGlow)"    the outline glow

   so both were being thrown away. The silhouette therefore rendered as the raw
   artwork, which is solid black, and hue-rotating black does nothing — that is
   why the body was a black cut-out with no edge glow whenever X-Ray was off. The
   comment here used to claim the silhouette was "a flat purple-blue"; it was,
   before this rule stopped the filter that made it so.

   Chained per element now, so the intended filter runs AND the hue shifts. */
/* The rotation is NEGATIVE, and that matters. #bodyColorize lands the body on
   rgb(61,51,102), hue ~252°. Measured off real pixels at the chest:
       +96deg -> hue 355°  (maroon)
       -96deg -> hue 167°  (dark green, and emerald is 160°)
      -110deg -> hue 143°  (going yellow)
       -80deg -> hue 183°  (going cyan)
   The old +96 was written when this rule was clobbering #bodyColorize, so the
   input was flat black and the rotation did nothing either way. */
#bodySvg .body-silhouette image {
  filter: url(#bodyColorize) hue-rotate(-96deg) saturate(0.85) brightness(1.15);
  /* Transparency so the background and the nerve lines read THROUGH the figure
     rather than it sitting on the page as a solid mass. On the image, not the
     group: the thinking pulse animates the group's opacity and would fight it.

     Measured at the chest, against a page background of ~5% lightness:
       black (before)          light  ~5%   indistinguishable from the page
       b1.0  / opacity 0.55    light  13%
       b1.15 / opacity 0.42    light  13%   <- here, reads translucent
       b1.35 / opacity 0.55    light  16%   too solid, a teal mannequin
     Brightness is doing the lifting and opacity the see-through, which is why
     the two middle rows land on the same number and look different. */
  opacity: 0.42;
}
#bodySvg .body-silhouette-glow image {
  filter: url(#bodyEdgeGlow) hue-rotate(-96deg);
}
/* There was a `.body-shape` rule here, and a `.limb:hover .body-shape` one
   below. Neither ever matched anything: the class does not appear in
   anatomy.html, experiment.css or even index-old.html. Removed rather than
   left as decoration. */


/* ── misc ── */
.particle-canvas { opacity: 0.55; }
.floating-questions .fq { border-color: color-mix(in srgb, var(--accent) 18%, transparent); }

/* default side-panel state: the old page left this empty because the story
   sections filled the column; those moved to index2, so it carries the
   principles and the interaction hint instead */
.anat-principles{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:9px;}
.anat-principles li{
  position:relative;padding-left:22px;font-size:0.83rem;
  color:var(--text-dim);line-height:1.6;
}
.anat-principles li::before{
  content:'';position:absolute;left:2px;top:0.55em;width:7px;height:7px;
  border-radius:50%;background:var(--accent2);opacity:0.8;
}
.anat-intro{padding-bottom:4px;}
.anat-intro .agent-icon{font-size:2rem;margin-bottom:10px;}
.anat-intro .agent-name{font-size:1.12rem;font-weight:800;letter-spacing:-0.3px;margin-bottom:3px;}
.anat-intro .agent-role{font-size:0.76rem;color:var(--accent2);font-weight:600;letter-spacing:0.3px;}
.anat-hint{font-size:0.84rem;color:var(--text-dim);line-height:1.65;margin-top:12px;}
/* once a limb is active its detail panel appears below this intro */
.agent-overlay{margin-top:20px;}