/* /what-is-a-resolver (js/pages/resolver-lab.js): four steps on a signal track
   beside a block-cell mesh scene, fitted to the viewport with no page scroll.
   Buttons are painted by css/components.css; this file owns layout, type and
   motion. Primary is the travelling signal and the claim; nothing loops. */

#scene .resolver-lab {
  position:relative;box-sizing:border-box;height:100%;min-height:0;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(380px,1fr);column-gap:clamp(32px,5vw,72px);
  align-items:center;padding:clamp(18px,3.2vh,34px) clamp(24px,4.5vw,64px);color:hsl(var(--text));
  background:radial-gradient(circle at 78% 50%,hsl(var(--primary-100)),transparent 46%);
}
#scene [data-page="resolver"] .hero-motion-toggle {display:none;}

/* Left ---------------------------------------------------------------------- */
.resolver-lab-copy {display:flex;flex-direction:column;gap:clamp(10px,1.9vh,18px);min-width:0;max-width:600px;}
#scene .resolver-lab .content-layer-path {align-self:flex-start;}
.resolver-lab-kicker {margin:0;font:500 11px/1.4 var(--mono-font,monospace);letter-spacing:.06em;text-transform:uppercase;color:hsl(var(--text-muted));}
#scene .resolver-lab h1 {margin:0;font:600 clamp(34px,4.3vw,58px)/1 var(--font-sans,"Albert Sans",sans-serif);letter-spacing:-.05em;color:hsl(var(--text-strong));text-wrap:balance;}
.resolver-lab-lede {margin:0;max-width:50ch;font:400 clamp(15px,1.2vw,17px)/1.5 var(--font-sans,"Albert Sans",sans-serif);color:hsl(var(--text-muted));}

/* The signal track: the old resolver motif, now the stepper. */
.resolver-track {position:relative;height:74px;margin:clamp(4px,1.4vh,14px) 14px 0;}
.resolver-track-line,.resolver-track-progress {position:absolute;left:0;top:17px;height:1px;}
.resolver-track-line {right:0;background:hsl(var(--border-strong));}
.resolver-track-progress {width:var(--progress,0%);background:linear-gradient(90deg,hsl(var(--primary-300)),hsl(var(--primary)));transition:width 720ms cubic-bezier(.65,0,.35,1);}
.resolver-track.is-arriving .resolver-track-glow {animation:resolver-lab-arrive 900ms cubic-bezier(.22,1,.36,1) 600ms both;}
@keyframes resolver-lab-arrive {0%{box-shadow:0 0 0 5px hsl(var(--primary-200)),0 0 22px hsl(var(--primary));}40%{box-shadow:0 0 0 12px hsl(var(--primary-100)),0 0 32px hsl(var(--primary));}100%{box-shadow:0 0 0 5px hsl(var(--primary-200)),0 0 22px hsl(var(--primary));}}
.resolver-track-glow {position:absolute;top:14px;left:var(--progress,0%);width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:hsl(var(--primary));
  box-shadow:0 0 0 5px hsl(var(--primary-200)),0 0 22px hsl(var(--primary));transition:left 720ms cubic-bezier(.65,0,.35,1);pointer-events:none;z-index:2;}
#scene .resolver-track-node {position:absolute;left:var(--at);top:0;transform:translateX(-50%);display:grid;justify-items:center;gap:10px;
  padding:4px 6px;border:0;background:none;color:hsl(var(--text-muted));cursor:pointer;font:500 13px/1.2 var(--font-sans,"Albert Sans",sans-serif);}
#scene .resolver-track-node:first-of-type {transform:translateX(-14px);justify-items:start;}
#scene .resolver-track-node:last-of-type {transform:translateX(calc(-100% + 14px));justify-items:end;}
.resolver-track-mark {display:block;width:16px;height:16px;margin-top:2px;box-sizing:border-box;border:1px solid hsl(var(--border-strong));background:hsl(var(--canvas));transform:rotate(45deg);
  transition:background-color 260ms,border-color 260ms,box-shadow 260ms,transform 260ms;}
.resolver-track-node[data-step="check"] .resolver-track-mark {border-radius:50%;transform:none;}
.resolver-track-node[data-step="laws"] .resolver-track-mark {transform:none;border-radius:3px;}
.resolver-track-label {display:grid;justify-items:inherit;gap:1px;white-space:nowrap;}
.resolver-track-label small {font:500 9.5px var(--mono-font,monospace);letter-spacing:.06em;color:hsl(var(--text-faint));}
#scene .resolver-track-node[data-done="true"] .resolver-track-mark {border-color:hsl(var(--text-muted));background:hsl(var(--nested));}
#scene .resolver-track-node[aria-pressed="true"] {color:hsl(var(--text-strong));}
#scene .resolver-track-node[aria-pressed="true"] .resolver-track-mark {border-color:hsl(var(--text-strong));background:hsl(var(--text-strong));box-shadow:0 0 0 4px hsl(var(--nested));}
#scene .resolver-track-node:is(:hover,:focus-visible) {color:hsl(var(--reference-700));}
#scene .resolver-track-node:is(:hover,:focus-visible) .resolver-track-mark {border-color:hsl(var(--reference-400));}

/* The step, in words: editorial, not boxed. */
.resolver-lab-caption {min-height:clamp(78px,12vh,104px);padding-left:16px;border-left:2px solid hsl(var(--primary-300));}
.resolver-lab-caption h2 {margin:0 0 6px;font:600 clamp(18px,1.6vw,22px)/1.25 var(--font-sans,"Albert Sans",sans-serif);letter-spacing:-.02em;color:hsl(var(--text-strong));}
.resolver-lab-caption p {margin:0;max-width:52ch;font:400 15px/1.55 var(--font-sans,"Albert Sans",sans-serif);color:hsl(var(--text-muted));}
.resolver-lab-caption.is-entering > * {animation:resolver-lab-in 420ms cubic-bezier(.22,1,.36,1) both;}
.resolver-lab-caption.is-entering > p {animation-delay:70ms;}

/* Once a run finishes, the way on draws the eye once. */
#scene .resolver-lab-next.is-ready {animation:resolver-lab-nudge 900ms cubic-bezier(.22,1,.36,1) 250ms 1;}
@keyframes resolver-lab-nudge {0%,100%{transform:none;}30%{transform:translateX(5px);}55%{transform:translateX(-2px);}}
/* On Laws the panel already links its sources. */
.resolver-lab[data-step="laws"] .resolver-lab-spec {display:none;}

/* Footer: one quiet back control, one clear way on, the source at the edge. */
.resolver-lab-footer {display:flex;align-items:center;gap:10px;}
#scene .resolver-lab-prev {display:inline-grid;place-items:center;flex:none;width:40px;height:40px;padding:0;border:1px solid hsl(var(--border-default));border-radius:50%;
  background:transparent;color:hsl(var(--text-muted));font:500 15px/1 var(--font-sans,"Albert Sans",sans-serif);cursor:pointer;transition:border-color 160ms,color 160ms,background-color 160ms;}
#scene .resolver-lab-prev:is(:hover,:focus-visible) {border-color:hsl(var(--border-strong));background:hsl(var(--nested));color:hsl(var(--text-strong));}
#scene .resolver-lab-prev[hidden] {display:none;}
#scene .resolver-lab-next {display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 14px 0 18px;border-radius:999px;
  font:600 13.5px/1 var(--font-sans,"Albert Sans",sans-serif);letter-spacing:-.005em;transition:background-color 160ms;}
#scene .resolver-lab-next:focus-visible {outline:2px solid hsl(var(--reference));outline-offset:3px;}
.resolver-lab-next-arrow {display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:currentColor;background:color-mix(in srgb,currentColor 16%,transparent);font-size:13px;transition:transform 220ms cubic-bezier(.22,1,.36,1);}
#scene .resolver-lab-next:is(:hover,:focus-visible) .resolver-lab-next-arrow {transform:translateX(3px);}
#scene .resolver-lab-spec {margin-left:auto;font:500 12px var(--font-sans,"Albert Sans",sans-serif);color:hsl(var(--text-faint));text-decoration:none;white-space:nowrap;transition:color 160ms;}
#scene .resolver-lab-spec:is(:hover,:focus-visible) {color:hsl(var(--reference));}

/* Right: the mesh scene ----------------------------------------------------- */
.resolver-lab-scene {display:flex;flex-direction:column;gap:12px;min-width:0;height:min(100%,560px);margin:0;padding:16px;box-sizing:border-box;
  border:1px solid hsl(var(--border-default));border-radius:14px;background:hsl(var(--surface));box-shadow:0 24px 60px hsl(var(--theme-shadow-color) / .22);}
.resolver-lab-scene-head {display:flex;align-items:center;justify-content:space-between;gap:12px;font:500 11px var(--mono-font,monospace);letter-spacing:.04em;color:hsl(var(--text-faint));}
.resolver-lab-address {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.resolver-lab-address code {padding:3px 9px;border:1px solid hsl(var(--border-default));border-radius:999px;font:500 11px var(--mono-font,monospace);color:hsl(var(--text));}

.resolver-lab-stage {position:relative;flex:1;min-height:200px;border-radius:10px;overflow:hidden;background:hsl(var(--canvas));border:1px solid hsl(var(--border-subtle));}
.resolver-mesh {display:block;width:100%;height:100%;cursor:crosshair;
  -webkit-mask-image:radial-gradient(ellipse 72% 78% at 50% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 72% 78% at 50% 50%,#000 58%,transparent 100%);}
/* What the scene is doing, in one sentence. */
.resolver-mesh-narration {position:absolute;left:12px;right:12px;bottom:10px;margin:0;display:flex;align-items:center;gap:8px;
  font:500 12px/1.35 var(--font-sans,"Albert Sans",sans-serif);color:hsl(var(--text-muted));opacity:0;transition:opacity 220ms;}
.resolver-mesh-narration[data-show="true"] {opacity:1;}
.resolver-mesh-narration::before {content:"";flex:none;width:6px;height:6px;border-radius:50%;background:hsl(var(--primary));box-shadow:0 0 0 3px hsl(var(--primary-200));animation:resolver-lab-breathe 1.1s ease-in-out 3;}
.resolver-mesh-narration[data-done="true"] {color:hsl(var(--text));}
.resolver-mesh-narration[data-done="true"]::before {animation:none;background:hsl(var(--text-faint));box-shadow:none;}
@keyframes resolver-lab-breathe {50%{box-shadow:0 0 0 6px hsl(var(--primary-100));}}
.resolver-mesh-labels {position:absolute;inset:0;pointer-events:none;}
.resolver-mesh-label {position:absolute;padding:2px 7px;border-radius:5px;background:hsl(var(--canvas) / .92);white-space:nowrap;
  font:500 11px/1.3 var(--mono-font,monospace);color:hsl(var(--text));opacity:0;transform:translateY(3px);transition:opacity 260ms,transform 260ms,left 60ms linear;}
.resolver-mesh-label[data-show="true"] {opacity:1;transform:none;}
/* The rule sits centred over the gate; the claim's labels centre on the fingerprint. */
.resolver-mesh-label:is(.resolver-mesh-label-rule,.resolver-mesh-label-claim,.resolver-mesh-label-sign,.resolver-mesh-label-accept) {translate:-50% 0;}
.resolver-mesh-label-rule {color:hsl(var(--text-strong));}
.resolver-mesh-label-rule[data-result="true"],.resolver-mesh-label-rule[data-result="false"] {font-weight:700;}
.resolver-mesh-label-claim {color:hsl(var(--text-strong));}
.resolver-mesh-label-sign,.resolver-mesh-label-accept {color:hsl(var(--text-muted));}
.resolver-mesh-label-accept[data-same="true"] {color:hsl(var(--success-700));background:hsl(var(--success-100));border:1px solid hsl(var(--success-300));}

.resolver-lab-controls {display:flex;align-items:center;gap:10px;}
/* Documents: one segmented control. */
.resolver-lab-inputs {display:inline-flex;gap:2px;padding:3px;border:1px solid hsl(var(--border-subtle));border-radius:10px;background:hsl(var(--canvas));}
#scene .resolver-lab-doc {display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap;height:30px;padding:0 12px;border:0;border-radius:7px;background:transparent;
  font:500 12.5px/30px var(--font-sans,"Albert Sans",sans-serif);color:hsl(var(--text-muted));cursor:pointer;transition:background-color 160ms,color 160ms,box-shadow 160ms;}
#scene .resolver-lab-doc small {font:500 10.5px var(--mono-font,monospace);color:hsl(var(--text-faint));}
#scene .resolver-lab-doc:hover {color:hsl(var(--text-strong));}
#scene .resolver-lab-doc[aria-pressed="true"] {background:hsl(var(--raised));color:hsl(var(--text-strong));box-shadow:inset 0 0 0 1px hsl(var(--border-default)),0 1px 2px hsl(var(--theme-shadow-color) / .2);}
#scene .resolver-lab-doc:focus-visible {outline:2px solid hsl(var(--reference));outline-offset:1px;}
#scene .resolver-lab-again {flex:none;display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 12px;border:1px solid;border-radius:999px;font:500 12.5px var(--font-sans,"Albert Sans",sans-serif);cursor:pointer;}
#scene .resolver-lab-again[hidden] {display:none;}
.resolver-lab-again-icon {display:inline-block;font-size:14px;transition:transform 420ms cubic-bezier(.22,1,.36,1);}
#scene .resolver-lab-again:hover .resolver-lab-again-icon {transform:rotate(-200deg);}
.resolver-lab-sr {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* Laws: in place of the stage on the Laws step. */
.resolver-lab-laws {display:none;margin:0;padding:0;list-style:none;}
.resolver-lab-laws-source {display:none;margin:0;font:400 11px/1.4 var(--mono-font,monospace);color:hsl(var(--text-faint));}
.resolver-lab[data-step="laws"] :is(.resolver-lab-stage,.resolver-lab-controls) {display:none;}
.resolver-lab[data-step="laws"] .resolver-lab-laws {display:grid;gap:8px;align-content:start;flex:1;}
.resolver-lab[data-step="laws"] .resolver-lab-laws-source {display:block;}
.resolver-lab[data-step="laws"] .resolver-lab-scene {height:auto;max-height:100%;}
.resolver-lab-law {position:relative;padding:12px 14px 12px 16px;border:1px solid hsl(var(--border-default));border-radius:10px;background:hsl(var(--canvas));
  animation:resolver-lab-rise 520ms cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0) * 90ms);}
.resolver-lab-law::before {content:"";position:absolute;left:0;top:12px;bottom:12px;width:2px;border-radius:2px;background:hsl(var(--primary-300));}
.resolver-lab-law-top {display:flex;align-items:center;gap:10px;}
.resolver-lab-law-num {font:500 10px var(--mono-font,monospace);color:hsl(var(--text-faint));}
.resolver-lab-law strong {flex:1;font:600 15px/1.3 var(--font-sans,"Albert Sans",sans-serif);color:hsl(var(--text-strong));}
.resolver-lab-law p {margin:5px 0 0 26px;font:400 13px/1.5 var(--font-sans,"Albert Sans",sans-serif);color:hsl(var(--text-muted));}
.resolver-lab-law-status {padding:2px 8px;border:1px solid;border-radius:999px;font:600 10px var(--mono-font,monospace);letter-spacing:.04em;text-transform:uppercase;}
.resolver-lab-law-status[data-status="live"] {border-color:hsl(var(--success-300));background:hsl(var(--success-100));color:hsl(var(--success-700));}
.resolver-lab-law-status[data-status="spec"] {border-color:hsl(var(--border-default));color:hsl(var(--text-muted));}
.resolver-lab-law-status[data-status="partial"] {border-color:hsl(var(--warning-300));background:hsl(var(--warning-100));color:hsl(var(--warning-700));}
.resolver-lab-law-toggle {display:none;}
#scene .resolver-lab-law-see {position:relative;z-index:1;display:inline;margin:0;padding:0;white-space:nowrap;border:0;background:none;cursor:pointer;
  font:500 12px var(--font-sans,"Albert Sans",sans-serif);color:hsl(var(--reference));text-decoration:underline;text-decoration-color:hsl(var(--reference-300));text-underline-offset:3px;}
#scene .resolver-lab-law-see:is(:hover,:focus-visible) {color:hsl(var(--reference-700));text-decoration-color:hsl(var(--reference-400));}

@keyframes resolver-lab-in {from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@keyframes resolver-lab-rise {from{opacity:0;transform:translateY(10px) scale(.985);}to{opacity:1;transform:none;}}

/* Shorter screens: tighten before anything scrolls. */
@media(min-width:901px) and (max-height:820px){
  #scene .resolver-lab h1 {font-size:clamp(34px,3.9vw,50px);}
}
@media(min-width:901px) and (max-height:760px){
  #scene .resolver-lab {padding-block:8px;}
  .resolver-lab-lede {display:none;}
  .resolver-lab-copy {gap:10px;}
  .resolver-track {height:66px;}
  .resolver-lab-caption {min-height:70px;}
  .resolver-lab-scene {padding:12px;gap:9px;}
  .resolver-lab-law {padding:8px 12px 8px 14px;}
  .resolver-lab-law p {font-size:12.5px;}
}
/* Tablet and phone: one column, the scene beneath the step. */
@media(max-width:900px){
  #scene .resolver-lab {grid-template-columns:minmax(0,1fr);align-items:start;align-content:start;row-gap:14px;overflow-y:auto;padding:14px 16px;}
  .resolver-lab-copy {max-width:none;gap:10px;}
  .resolver-lab-lede,.resolver-lab-kicker {display:none;}
  #scene .resolver-lab h1 {font-size:27px;}
  .resolver-track {height:58px;margin-inline:10px;}
  #scene .resolver-track-node {font-size:12px;gap:8px;}
  .resolver-lab-caption {min-height:0;}
  .resolver-lab-caption h2 {font-size:16px;}
  .resolver-lab-caption p {font-size:13.5px;}
  .resolver-lab-footer {gap:8px 14px;}
  .resolver-lab-scene {height:auto;padding:10px;}
  .resolver-lab-stage {flex:none;height:200px;min-height:0;}
  #scene .resolver-lab-doc {height:28px;line-height:28px;padding:0 9px;font-size:12px;}
  .resolver-lab-inputs {width:100%;box-sizing:border-box;}
  #scene .resolver-lab-doc {flex:1;justify-content:center;gap:4px;padding:0 6px;}
  .resolver-mesh-label {font-size:9.5px;padding:1px 5px;}
  .resolver-lab-scene-head {display:flex;}
  .resolver-lab-address {display:none;}
  .resolver-lab-scene-head {position:absolute;right:20px;margin-top:6px;z-index:2;}
  .resolver-lab-scene {position:relative;}
  #scene .resolver-lab-spec {margin-left:auto;}
  .resolver-lab-law p {display:none;margin-left:0;}
  .resolver-lab[data-step="laws"] .resolver-lab-laws {gap:6px;}
  .resolver-lab-law {padding:8px 12px;}
  .resolver-lab-law strong {font-size:13.5px;}
  .resolver-lab-law[data-open="true"] p {display:block;}
  /* The narration line says these on phones; the stage keeps only the claim id. */
  .resolver-mesh-label:is(.resolver-mesh-label-sign,.resolver-mesh-label-accept,.resolver-mesh-label-doc) {display:none;}
  .resolver-mesh-narration {font-size:11px;bottom:6px;}
  .resolver-mesh {cursor:default;}
  .resolver-lab-law-toggle {display:block;position:absolute;inset:0;width:100%;border:0;background:none;cursor:pointer;}
  .resolver-lab-law[data-open="true"] {border-color:hsl(var(--reference-400));background:hsl(var(--reference-100));}
}
/* Narrower desktops: laws open one at a time, as on phones. */
@media(min-width:901px) and (max-width:1180px){
  .resolver-lab-law p {display:none;}
  .resolver-lab-law[data-open="true"] p {display:block;}
  .resolver-lab-law-toggle {display:block;position:absolute;inset:0;width:100%;border:0;background:none;cursor:pointer;}
  .resolver-lab-law[data-open="true"] {border-color:hsl(var(--reference-400));background:hsl(var(--reference-100));}
}
/* Short phones (e.g. 375x667): keep every step on one screen. */
@media(max-width:900px) and (max-height:720px){
  #scene .resolver-lab {row-gap:10px;padding-block:10px;}
  #scene .resolver-lab .content-layer-path {display:none;}
  #scene .resolver-lab h1 {font-size:22px;}
  .resolver-lab-copy {gap:8px;}
  .resolver-track {height:50px;margin-top:0;}
  .resolver-track-label small {display:none;}
  .resolver-lab-caption h2 {font-size:15px;margin-bottom:3px;}
  .resolver-lab-caption p {font-size:12.5px;line-height:1.45;}
  #scene .resolver-lab-next {height:38px;}
  #scene .resolver-lab-spec {display:none;}
  .resolver-lab-stage {height:120px;}
  .resolver-lab-scene {padding:6px;gap:6px;}
  #scene .resolver-lab-doc {height:26px;line-height:26px;font-size:11.5px;}
  #scene .resolver-lab-again {min-height:26px;font-size:11.5px;}
  .resolver-track {height:44px;}
  #scene .resolver-track-node {gap:6px;}
  .resolver-lab-caption {padding-left:12px;}
  .resolver-lab-law {padding:6px 10px;}
  .resolver-lab-laws-source {display:none !important;}
  .resolver-mesh-label-rule {display:none;}
}
@media(prefers-reduced-motion:reduce){
  .resolver-lab *,.resolver-lab *::before {animation:none !important;transition:none !important;}
}