/* ============================================================================
   Proof — the requirement autopsy (homepage §1).

   Two states, one DOM.

   STATIC (default, and the only state without JavaScript): the figure is a
   plain document. Nine layers in normal flow, each with its number, label and
   fragment; the four unwritten layers carry their question; the specimen
   sentence, the realization and the contract are ordinary blocks. Nothing is
   hidden, nothing waits on a keyframe, no rule here animates text in from
   opacity 0.

   LIVE (.ax-live, added by assets/autopsy.js only when it can actually drive a
   frame loop): the same nodes are re-positioned into a 3D specimen stage.
   Absolute placement and per-tray transforms come from the script; this file
   only declares the stage, the slab, and the two tray dialects (stated, ghost).

   Colour comes from the tokens in proof.css. Stated fragments read ink, and
   violet while the dissection holds them. The four unwritten layers read as
   amber-dashed absence.
   ========================================================================== */

.ax{
  margin-top:26px;
  /* live-mode geometry; the script measures the figure and overwrites these */
  --ax-h:600px;      /* stage height once the stage goes 3D */
  --ax-tw:640px;     /* tray width */
  --ax-pitch:46px;   /* tray height and vertical spacing */
  --ax-fx:186px;     /* fragment inset inside the tray */
  --ax-qw:190px;     /* width of an unwritten-question note */
}

/* ------------------------------------------------------------------- readout */
.ax-hud{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);}
.ax-hud .ax-phase{color:var(--violet-ink);white-space:nowrap;}
.ax-rail{height:2px;margin:9px 0 0;background:var(--line-soft);overflow:hidden;}
.ax-rail i{display:block;height:100%;width:100%;background:var(--cyan);}

/* --------------------------------------------------------------------- stage */
.ax-stage{position:relative;margin-top:14px;background:var(--panel);
  border:1px solid var(--line);border-radius:3px;
  box-shadow:0 1px 4px rgba(20,24,29,.05);
  padding:clamp(18px,2.6vw,30px);}
.ax-bg,.ax-fil,.ax-scalpel{display:none;}

/* specimen sentence */
.ax-slabel{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--dim);margin:0 0 14px;}
.ax-sent{margin:0;font-size:clamp(15px,2.1vw,22px);line-height:1.55;font-weight:600;
  letter-spacing:.01em;color:var(--ink);max-width:none;}

/* ---------------------------------------------------------- layers (static) */
.ax-deck{margin-top:24px;border-top:1px solid var(--line);}
.ax-layer{position:relative;display:grid;
  grid-template-columns:26px minmax(104px,150px) 1fr;
  gap:6px 14px;align-items:baseline;padding:10px 2px;
  border-bottom:1px solid var(--line-soft);}
.ax-layer.ghost{background:rgba(199,125,31,.05);}
.ax-tray{display:none;}
.ax-num{font-size:9.5px;letter-spacing:.08em;color:var(--dim2);}
.ax-lbl{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2);}
.ax-layer.ghost .ax-lbl{color:var(--amber-ink);}
.ax-frag{font-size:13px;line-height:1.5;color:var(--ink);font-weight:600;
  border-bottom:1px solid rgba(124,92,214,.5);align-self:start;}
.ax-layer.ghost .ax-frag{font-size:10.5px;letter-spacing:.16em;font-weight:400;
  text-transform:uppercase;color:var(--amber-ink);border-bottom:0;}
.ax-hatch{display:inline-block;width:46px;height:11px;margin-right:9px;
  vertical-align:-1px;border:1px dashed rgba(199,125,31,.7);
  background:repeating-linear-gradient(135deg,rgba(199,125,31,.16) 0 4px,transparent 4px 9px);}
.ax-q{grid-column:3;margin:0;font-size:11.5px;line-height:1.6;color:var(--ink2);}
.ax-qt{display:block;font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--amber-ink);margin-bottom:3px;}

/* ------------------------------------------------------- realization (static) */
.ax-realize{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);}
.ax-r1{margin:0;font-size:clamp(14px,1.7vw,18px);line-height:1.5;font-weight:600;
  color:var(--ink);max-width:56ch;}
.ax-r2{margin:10px 0 0;font-size:12.5px;line-height:1.7;color:var(--ink2);max-width:62ch;}
.ax-r3{margin:12px 0 0;font-size:9px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--dim);}

/* ------------------------------------------------------------------ contract */
.ax-contract{margin-top:22px;border:1px solid var(--line);border-radius:3px;
  background:var(--panel);overflow:hidden;}
.ax-ch{position:relative;display:flex;justify-content:space-between;align-items:center;
  gap:12px;padding:9px 13px;border-bottom:1px solid var(--line-soft);
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);
  overflow:hidden;}
.ax-ok{display:inline-flex;align-items:center;gap:7px;color:var(--link);
  white-space:nowrap;}
.ax-ok i{width:6px;height:6px;background:var(--cyan);}
.ax-contract .term{border:0;border-radius:0;}
.ax-contract .term pre{font-size:11px;line-height:1.72;}

/* the stamp: script-added class only, so no-JS reads a plain VERIFIED */
@keyframes ax-stamp{0%{opacity:0;transform:scale(1.06)}
  55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes ax-sweep{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.ax-stamped .ax-ok{animation:ax-stamp .5s cubic-bezier(.2,.8,.2,1) both;}
.ax-stamped .ax-ch::after{content:"";position:absolute;left:0;top:0;bottom:0;
  width:38%;pointer-events:none;
  background:linear-gradient(90deg,rgba(14,157,184,0),rgba(14,157,184,.14),rgba(14,157,184,0));
  animation:ax-sweep .85s ease-out .1s both;}

/* -------------------------------------------------------- caption + controls */
.ax-bar{display:flex;justify-content:space-between;align-items:flex-start;
  gap:16px;margin-top:14px;flex-wrap:wrap;}
.ax-bar .fig-note{margin:0;max-width:72ch;}
/* an author display value beats the UA [hidden] rule; without this the
   controls stay focusable with JS off, doing nothing */
.ax-ctl[hidden]{display:none;}
.ax-ctl{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.ax-replay{font:inherit;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);background:transparent;border:1px solid var(--line);
  border-radius:2px;padding:7px 12px;cursor:pointer;}
.ax-replay:hover{color:var(--ink);border-color:var(--ink);}
.ax-scrub-l{display:flex;align-items:center;gap:9px;font-size:9px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim);}
.ax-scrub{width:132px;accent-color:var(--violet);cursor:pointer;}

/* ==========================================================================
   LIVE STATE — the same nodes, re-laid-out as a 3D specimen stage.
   ========================================================================== */
.ax-live .ax-stage{height:var(--ax-h);overflow:hidden;
  transition:height .9s cubic-bezier(.22,.61,.36,1);
  perspective:1200px;perspective-origin:50% 48%;
  background:linear-gradient(180deg,#ffffff 0%,#f7f9fb 62%,#f1f4f7 100%);}

.ax-live .ax-bg{display:block;position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;}
.ax-live .ax-fil{display:block;position:absolute;inset:0;width:100%;height:100%;
  z-index:3;pointer-events:none;}
.ax-live .ax-scalpel{display:block;position:absolute;top:6%;bottom:6%;width:1px;
  z-index:2;opacity:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(124,92,214,0),rgba(124,92,214,.7) 26%,
    rgba(124,92,214,.7) 74%,rgba(124,92,214,0));}

/* specimen sits centred on the stage until the first cut */
.ax-live .ax-specimen{position:absolute;left:0;right:0;top:48%;z-index:2;
  transform:translateY(-50%);text-align:center;padding:0 6%;pointer-events:none;}
.ax-live .ax-slabel{margin-bottom:18px;}
.ax-live .ax-sent{font-size:clamp(16px,2.3vw,25px);letter-spacing:.04em;}

/* deck: a zero-size 3D origin the trays hang from */
.ax-live .ax-deck{position:absolute;left:50%;top:48%;width:0;height:0;
  margin:0;border:0;z-index:1;transform-style:preserve-3d;pointer-events:none;}
.ax-live .ax-layer{position:absolute;display:block;
  left:calc(var(--ax-tw) / -2);top:calc(var(--ax-pitch) / -2);
  width:var(--ax-tw);height:var(--ax-pitch);
  padding:0;border:0;background:none;opacity:0;
  transform-style:preserve-3d;will-change:transform,opacity;}

.ax-live .ax-tray{display:block;position:absolute;inset:0;opacity:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line-soft);
  background:rgba(255,255,255,.94);box-shadow:0 12px 26px rgba(20,24,29,.07);}
.ax-live .ax-layer.ghost{background:none;}
.ax-live .ax-layer.ghost .ax-tray{border:1px dashed rgba(199,125,31,.6);
  background:rgba(199,125,31,.05);box-shadow:none;}

.ax-live .ax-num{position:absolute;left:11px;top:50%;transform:translateY(-50%);
  font-size:8.5px;}
.ax-live .ax-lbl{position:absolute;left:34px;top:50%;transform:translateY(-50%);
  font-size:8.8px;letter-spacing:.18em;white-space:nowrap;color:var(--dim);}
.ax-live .ax-layer.stated .ax-lbl{color:var(--ink2);}
.ax-live .ax-frag{position:absolute;left:var(--ax-fx);right:13px;top:50%;
  transform:translateY(-50%);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;border-bottom:0;font-size:13.5px;
  transition:color .35s linear;}
/* the dissection beat holds the stated fragments in spec violet */
.ax-live .ax-layer.stated.lit .ax-frag{color:var(--violet-ink);}
.ax-live .ax-layer.ghost .ax-frag{font-size:10px;letter-spacing:.14em;}
.ax-live .ax-hatch{width:34px;margin-right:8px;}

.ax-live .ax-q{position:absolute;left:calc(100% + 22px);top:50%;
  width:var(--ax-qw);margin:0;transform:translateY(-50%);opacity:0;
  font-size:10.5px;line-height:1.5;}
.ax-live .ax-qt{font-size:8px;letter-spacing:.2em;margin-bottom:2px;}

/* realization overlays the dimmed stage, then hands over to the contract */
.ax-live .ax-realize{position:absolute;left:0;right:0;top:48%;z-index:4;
  margin:0;padding:0 8%;border:0;opacity:0;
  transform:translateY(-50%);text-align:center;pointer-events:none;}
.ax-live .ax-r1{margin-left:auto;margin-right:auto;}
.ax-live .ax-r2{margin-left:auto;margin-right:auto;}

/* ---------------------------------------------------------- narrow + reduced */
@media (max-width:720px){
  .ax-layer{grid-template-columns:26px 1fr;}
  .ax-lbl,.ax-frag,.ax-q{grid-column:2;}
  .ax-sent{line-height:1.7;}
  .ax-bar{flex-direction:column;}
}

/* Reduced motion: the script never enters the live state, so the figure is
   already the finished document. Only the stamp needs standing down. */
@media (prefers-reduced-motion: reduce){
  .ax-stamped .ax-ok{animation:none;}
  .ax-stamped .ax-ch::after{content:none;}
  .ax-live .ax-frag{transition:none;}
}