/* ==========================================================================
   Harness Lab: the website's signature motions (b43), from the owner's motion lookbook (Harness guide tab).
   H1 the hero scene, H2 the agent loop, H3 ask the brain, H4 same core in each harness. Loaded after site.css, on the pages that carry a scene.
   Tokens only: no colour literal here (a test checks). The still (final) frame of every scene is plain markup, so the page reads the same
   with scripts off and under Reduce motion; motion.js drives the same elements when motion is allowed. Only transform and opacity
   move on HTML elements; the SVG scenes write their own shapes (paths and radii), as the brand's speaking ring does.
   ========================================================================== */

/* ---------- shared: the scene, its Pause / Play and Replay buttons ---------- */
.mo { position: relative; }
.mo .bm .bm-body, .mo .bm .bm-agent { transition: none; }            /* motion.js writes these every frame: no easing on top */
.mo-sig { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: var(--s3); color: var(--subtle-foreground); pointer-events: none; user-select: none; }
.mo-sig .bm { flex: none; }
.mo-sig-text { display: grid; line-height: 1.2; }
.mo-sig-name, .mo-sig-domain { font-size: 12px; letter-spacing: -0.01em; }
.mo-sig-name { font-weight: 600; }
.mo-ctl { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin-top: var(--s3); }
.mo-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--s3); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface-2); color: var(--muted-foreground); font: inherit; font-size: var(--text-sm); font-weight: 500; cursor: pointer; }
.mo-btn:hover { background: var(--surface-3); color: var(--foreground); }
.mo-btn[hidden] { display: none; }
.mo-btn .ic-play { display: none; }
.mo-btn[data-mode="paused"] .ic-pause { display: none; }
.mo-btn[data-mode="paused"] .ic-play { display: inline-flex; }
.mo-btn svg { display: block; }
/* paused (by the visitor, or because the scene is off screen): the brand's own CSS animations and the moving light stop too */
.mo.is-paused .bm *, .mo.is-paused .beam, .mo.is-paused .beam::before { animation-play-state: paused; }

/* ---------- H1: everything around the model (the hero) ---------- */
.hv { display: flex; flex-direction: column; gap: var(--s3); width: 100%; max-width: 480px; margin: 0; justify-self: center; }
.hv-stage { display: block; width: 100%; aspect-ratio: 420 / 340; }
.hv-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hv-br { fill: none; stroke: var(--bm-body); stroke-linecap: round; stroke-linejoin: round; }
.hv-core { fill: var(--bm-agent); }
.hv-chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin: 0; padding: 0; }
.hv-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid color-mix(in oklch, var(--primary) 40%, transparent); border-radius: 999px;
  font: 12.5px/1 var(--font-mono); color: var(--muted-foreground); white-space: nowrap; }
.hv-chip-core { border-color: color-mix(in oklch, var(--ai) 55%, transparent); color: var(--ai-text); }
.hv-chip-id { color: var(--subtle-foreground); }
/* the page marks itself mo-js (motion-init.js) when the scene will play: it starts from its first frame, not from the still one */
.mo-js .hv-mark, .mo-js .hv-chip { opacity: 0; }
@media (min-width: 960px) { .hv { max-width: 520px; } }
@media (max-width: 599px) {              /* phones: the visual stays about 320 px tall, so the labels are smaller and the layer numbers go */
  .hv { gap: var(--s2); }
  .hv-chips { gap: 6px; }
  .hv-chip { padding: 5px 8px; font-size: 11.5px; }
  .hv-chip-id { display: none; }
}

/* ---------- H2: the agent loop ---------- */
.lp { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); align-items: center; margin-top: var(--s5); }
@media (min-width: 860px) { .lp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); } }
.lp-fig { margin: 0; }
.lp-stage { width: 100%; max-width: 480px; margin-inline: auto; aspect-ratio: 440 / 380; }
.lp-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lp-ring { fill: none; stroke: color-mix(in oklch, var(--primary) 30%, transparent); stroke-width: 1.5; }
.lp-node { fill: var(--surface-1); stroke: var(--primary); stroke-width: 2; }
.lp-node.is-on { fill: var(--ai); stroke: var(--ai); }
.lp-label { font: 600 14px var(--font-sans); fill: var(--subtle-foreground); }
.lp-label.is-on { fill: var(--foreground); }
.lp-trail { fill: none; stroke: var(--ai); stroke-width: 3; stroke-linecap: round; }
.lp-pulse { fill: var(--ai); }
.lp-steps { list-style: none; display: grid; gap: var(--s3); margin: 0; padding: 0; }
.lp-step { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s3); padding: 14px 16px; background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--elevation-card); }
.lp-step::before { content: ""; position: absolute; inset-block: 12px; inset-inline-start: 0; width: 3px; border-radius: 3px; background: var(--ai); opacity: 0; transition: opacity var(--dur-base) var(--ease-out-quart); }
.lp-step.is-on { background: var(--surface-2); border-color: var(--border-strong); }
.lp-step.is-on::before { opacity: 1; }
.lp-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bg-sunken); color: var(--muted-foreground); font: 600 13px var(--font-mono); }
.lp-step.is-on .lp-n { background: var(--ai-solid); color: var(--ai-solid-foreground); }
.lp-body { min-width: 0; }
.lp-what { margin: 0; font-weight: 600; color: var(--foreground); }
.lp-topic { font-size: var(--text-sm); font-weight: 500; }
.lp-line { margin: var(--s1) 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted-foreground); }

/* ---------- H3: ask the brain ---------- */
.ab { max-width: 860px; margin-top: var(--s5); padding: var(--s5); }
.ab-tag { margin: 0 0 var(--s4); font-size: var(--text-sm); color: var(--subtle-foreground); }
.ab-example { display: inline-flex; margin-inline-end: var(--s2); padding: 2px 8px; border-radius: var(--radius-sm); background: var(--ribbon-soft); color: var(--ribbon-text); font-size: var(--text-xs); font-weight: 600; }
.ab-stage { position: relative; display: flex; flex-direction: column; gap: var(--s5); }
.ab-q { display: flex; justify-content: flex-end; }
.ab-bubble { position: relative; max-width: min(100%, 34rem); margin: 0; padding: 12px 16px; color: var(--foreground); font-size: 16px; line-height: 24px; }
.ab-bubble-bg { position: absolute; inset: 0; border-radius: 16px 16px 6px 16px; background: var(--surface-3); }
.ab-bubble-text { position: relative; }
.ab-row { display: flex; align-items: flex-start; gap: var(--s3); }
.ab-av { display: inline-flex; flex: none; }
.ab-av .bm-ring { width: 56px; height: 56px; }
.ab-card { position: relative; flex: 1 1 auto; min-width: 0; padding: 16px 18px; }
.ab-card > * { position: relative; }
.ab-card .ab-card-bg { position: absolute; inset: 0; border: 1px solid color-mix(in oklch, var(--ai) 35%, transparent); border-radius: 16px;
  background: color-mix(in oklch, var(--ai) 8%, transparent); transform-origin: left center; }
.ab-ans { margin: 0 0 var(--s2); font-size: 16.5px; line-height: 1.55; color: var(--foreground); }
.ab-build { margin: 0 0 var(--s3); font-size: 15px; line-height: 1.5; color: var(--muted-foreground); }
.ab-links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); margin: 0; padding: 0; }
.ab-link { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid color-mix(in oklch, var(--ai) 45%, transparent); border-radius: 999px;
  color: var(--ai-text); font-size: 13px; text-decoration: none; }
.ab-link:hover { background: var(--ai-soft); color: var(--ai-text); }
.ab-composer { --beam-radius: 16px; }
.ab-inner { position: relative; display: flex; align-items: center; min-height: 56px; padding: 6px 6px 6px 18px; }
.ab-ph, .ab-typed { position: absolute; inset-inline: 18px 64px; top: 50%; overflow: hidden; font-size: 16px; line-height: 24px; text-overflow: ellipsis; white-space: nowrap; transform: translateY(-50%); }
.ab-ph { color: var(--subtle-foreground); }
.ab-typed { color: var(--foreground); }
.ab-send { display: grid; flex: none; place-items: center; width: 40px; height: 40px; margin-inline-start: auto; border-radius: 10px; background: var(--ai-solid); color: var(--ai-solid-foreground); }
.ab-send svg { display: block; }
.ab-br { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ab-bl, .ab-brr { fill: none; stroke: var(--bm-body); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: 0; }
@media (max-width: 479px) { .ab { padding: var(--s4); } .ab-av .bm-ring { width: 44px; height: 44px; } }

/* ---------- H4: same core, N harnesses ----------
   The dock brackets are neutral (brand.md section 3: never tint the mark in a harness's colour). The identity colour is only the dot by
   the name and the ring of the lit card while the core is docked. */
.dkw { margin-top: var(--s5); }
.dk-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 10px; margin: 0; padding: 0; }
.dk.t1 { --dk-c: var(--tool-1); } .dk.t2 { --dk-c: var(--tool-2); } .dk.t3 { --dk-c: var(--tool-3); }
.dk.t4 { --dk-c: var(--tool-4); } .dk.t5 { --dk-c: var(--tool-5); } .dk.t6 { --dk-c: var(--tool-6); }
.dk-link { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; padding: 14px 12px; text-align: center; text-decoration: none; color: var(--foreground);
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elevation-card); }
.dk-link::after { content: ""; position: absolute; inset: -1px; border: 2px solid var(--dk-c); border-radius: inherit; opacity: 0; transition: opacity var(--dur-base) var(--ease-out-quart); pointer-events: none; }
.dk.is-lit .dk-link::after { opacity: 1; }
.dk-link:hover { color: var(--foreground); border-color: var(--border-strong); }
.dk-slot { display: block; width: 96px; aspect-ratio: 64 / 40; }
.dk-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dk-br { fill: none; stroke: var(--muted-foreground); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-base) var(--ease-out-quart); }
.dk-core { fill: var(--bm-agent); }
.dk.is-lit .dk-l { transform: translateX(2px); }
.dk.is-lit .dk-r { transform: translateX(-2px); }
.dk-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; overflow-wrap: anywhere; }
.dk-name .htag-dot { width: 10px; height: 10px; }
.dk-meta { font-size: 12.5px; color: var(--muted-foreground); }
.dk-fly { position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--bm-agent); opacity: 0; pointer-events: none; }
.dkw.is-live .dk-core { opacity: 0; }
.dkw.is-live .dk-fly { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .mo-ctl { display: none; }                                         /* nothing moves, so there is nothing to pause */
  .lp-step::before, .dk-link::after, .dk-br { transition: none; }
  .dkw.is-live .dk-core { opacity: 1; }
  .dkw.is-live .dk-fly { opacity: 0; }
}