/* ============================================================
   Engine Lab — interactive demos
   Uses the portfolio's own tokens so the panels read as engine tooling
   rather than a bolted-on widget.
   ============================================================ */

.section--lab{background:transparent;border-block:1px solid color-mix(in oklab,var(--line) 42%,transparent)}
.lab-list{display:grid;gap:clamp(28px,4vw,52px);margin-top:clamp(32px,4vw,52px)}

/* ---------------- demo shell ---------------- */
.lab-demo{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);padding:clamp(16px,2.2vw,26px);
  contain:layout paint}
.lab-demo__head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.lab-demo__title{display:flex;align-items:flex-start;gap:12px}
.lab-demo__idx{font-family:var(--font-mono);font-size:.72rem;color:var(--accent);border:1px solid color-mix(in oklab,var(--accent) 40%,transparent);
  border-radius:6px;padding:3px 8px;flex:0 0 auto;margin-top:3px}
.lab-demo__title h3{font-size:clamp(1.05rem,2vw,1.35rem);font-weight:700;letter-spacing:-.02em}
.lab-demo__sub{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.lab-demo__tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none}
.lab-demo__tags li{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;color:var(--faint);
  border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.lab-demo__blurb{color:var(--muted);font-size:.95rem;max-width:78ch;margin:14px 0 16px}
.lab-demo__stage{position:relative;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-2);overflow:clip}
.lab-demo__stage.is-live{background:var(--bg-3)}
.lab-demo__paused{position:absolute;inset:auto 10px 10px auto;font-family:var(--font-mono);font-size:.66rem;color:var(--faint);
  background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:4px 8px}
.lab-demo__proves{margin-top:14px;font-size:.86rem;color:var(--faint);max-width:78ch}
.lab-demo__proves span{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  margin-right:10px}
@media (pointer:coarse){
  .lab-play{overscroll-behavior:contain}
  .net__viewport,.phys__field{overscroll-behavior:contain}
}

/* ---------------- opt-in poster ---------------- */
.lab-poster{display:grid;place-items:center;gap:14px;padding:clamp(36px,7vw,72px) 20px;text-align:center}
.lab-poster__art{font-family:var(--font-mono);font-size:clamp(1.4rem,4vw,2.2rem);letter-spacing:.3em;color:var(--faint);opacity:.5}
.lab-poster__note{font-size:.85rem;color:var(--muted)}
.lab-poster__run{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 22px;border-radius:999px;
  background:var(--accent);color:var(--on-accent);font-weight:600;font-size:.9rem;transition:.2s var(--ease)}
.lab-poster__run:hover{transform:translateY(-2px);filter:brightness(1.07)}
.lab-poster__run-dot{width:7px;height:7px;border-radius:50%;background:currentColor}

/* ---------------- shared atoms ---------------- */
.lab-toggle{display:flex;align-items:center;gap:9px;width:100%;min-height:34px;padding:0 10px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--bg-2);color:var(--muted);font-size:.78rem;text-align:left;transition:.16s var(--ease)}
.lab-toggle:hover{border-color:var(--line-2);color:var(--text)}
.lab-toggle.is-on{border-color:color-mix(in oklab,var(--accent) 55%,transparent);color:var(--text);
  background:color-mix(in oklab,var(--accent) 10%,var(--bg-2))}
.lab-toggle__led{width:8px;height:8px;border-radius:2px;background:var(--line-2);flex:0 0 auto;transition:.16s var(--ease)}
.lab-toggle.is-on .lab-toggle__led{background:var(--accent);box-shadow:0 0 8px color-mix(in oklab,var(--accent) 70%,transparent)}

.lab-slider{display:block}
.lab-slider__top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:3px}
.lab-slider__label{font-size:.76rem;color:var(--muted)}
.lab-slider__value{font-family:var(--font-mono);font-size:.7rem;color:var(--accent)}
.lab-slider input{width:100%;height:18px;accent-color:var(--accent);cursor:pointer}

.lab-stat{display:flex;flex-direction:column;gap:2px;padding:7px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--bg-2);min-width:0}
.lab-stat__label{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.lab-stat__value{font-family:var(--font-mono);font-size:.86rem;color:var(--text);font-variant-numeric:tabular-nums}
.lab-stat--warn .lab-stat__value{color:var(--accent-2)}

.lab-btn{min-height:32px;padding:0 13px;border-radius:999px;background:var(--accent);color:var(--on-accent);
  font-size:.76rem;font-weight:600;transition:.16s var(--ease)}
.lab-btn:hover{filter:brightness(1.08)}
.lab-btn--ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}
.lab-btn--ghost:hover{border-color:var(--line-2);color:var(--text)}

/* ---------------- 01 netcode ---------------- */
.net{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:0;align-items:stretch}
.net:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* the viewport stretches to whatever the control column needs, and the
   canvas fills it — no dead gutter under the simulation on wide layouts */
.net__viewport{position:relative;min-width:0;min-height:clamp(260px,32vw,380px);touch-action:none}
.net__canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.net__hint{position:absolute;left:12px;bottom:10px;font-family:var(--font-mono);font-size:.66rem;color:var(--faint);
  background:color-mix(in oklab,var(--bg) 80%,transparent);border:1px solid var(--line);border-radius:6px;padding:4px 8px;
  transition:opacity .25s var(--ease);pointer-events:none}
.net__hint.is-hidden{opacity:0}
.net__panel{border-left:1px solid var(--line);padding:14px;display:flex;flex-direction:column;gap:16px;background:var(--bg-2);overflow:visible}
.net__group{display:flex;flex-direction:column;gap:9px}
.net__group-title{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.net__actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.net__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:6px}
.net__read{margin:0;padding:11px 14px;border-top:1px solid var(--line);grid-column:1/-1;font-size:.82rem;color:var(--muted);
  background:var(--bg-2)}

/* ---------------- 02 physics ---------------- */
.phys{display:grid;grid-template-columns:minmax(0,1fr) 260px;align-items:stretch}
.phys__field{position:relative;min-width:0;min-height:clamp(300px,36vw,420px);padding:16px;overflow:hidden;
  display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;touch-action:none}
.phys__chip{display:inline-flex;align-items:center;padding:6px 12px;border:1px solid var(--line);border-radius:999px;
  background:var(--bg-2);color:var(--text);font-size:.76rem;font-weight:500;white-space:nowrap;
  will-change:transform;transform-origin:50% 50%;user-select:none}
.phys__chip--group{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  border-color:color-mix(in oklab,var(--accent) 45%,transparent);color:var(--accent);
  background:color-mix(in oklab,var(--accent) 10%,var(--bg-2))}
.phys__chip[data-asleep="1"]{opacity:.72}
.phys__field--idle .phys__chip{will-change:auto}
.phys__debug{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0}
.phys__debug.is-on{opacity:1}
.phys__panel{border-left:1px solid var(--line);padding:14px;display:flex;flex-direction:column;gap:16px;background:var(--bg-2);overflow:visible}
.phys__group{display:flex;flex-direction:column;gap:9px}
.phys__note{font-size:.74rem;color:var(--faint);line-height:1.45}

/* ---------------- 03 event bus ---------------- */
.bus{display:grid}
.bus__cols{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.72fr) minmax(0,1.15fr)}
.bus__col{padding:14px;display:flex;flex-direction:column;gap:9px;min-width:0}
.bus__col+.bus__col{border-left:1px solid var(--line)}
.bus__log{display:flex;flex-direction:column;gap:4px;height:clamp(230px,26vw,300px);overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
.bus__empty{font-size:.78rem;color:var(--faint);padding:8px 0}
.bus__row{display:grid;gap:2px;text-align:left;padding:6px 9px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--bg-2);transition:.14s var(--ease)}
.bus__row:hover{border-color:var(--line-2)}
.bus__row.is-sel{border-color:color-mix(in oklab,var(--accent) 55%,transparent);background:color-mix(in oklab,var(--accent) 9%,var(--bg-2))}
.bus__row-type{font-family:var(--font-mono);font-size:.72rem;color:var(--accent)}
.bus__row-payload{font-family:var(--font-mono);font-size:.66rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bus__row-meta{font-family:var(--font-mono);font-size:.6rem;color:var(--faint)}
.bus__emitters{display:flex;flex-wrap:wrap;gap:6px}

.bus__graph{width:100%;max-height:300px;font-family:var(--font-mono);font-size:9px}
.bus__rail{stroke:var(--line-2);stroke-width:1.5}
.bus__rail-dot{fill:var(--accent)}
.bus__edge{stroke:var(--line);stroke-width:1.25;fill:none}
.bus__dot{fill:var(--line-2)}
.bus__graph text{fill:var(--faint)}
.bus__node.is-hot .bus__edge{stroke:var(--accent)}
.bus__node.is-hot .bus__dot{fill:var(--accent)}
.bus__node.is-hot text{fill:var(--text)}
.bus__ghost{fill:var(--faint);opacity:.6}

.bus>.net__stats{padding:12px 14px;border-top:1px solid var(--line)}
.bus__blurb{font-size:.74rem;color:var(--faint);line-height:1.45}
.bus__code{height:clamp(240px,28vw,320px);overflow:auto;overscroll-behavior:contain;margin:0;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--bg-2);font-family:var(--font-mono);font-size:.7rem;line-height:1.62;
  white-space:pre;color:var(--muted)}
.cs-kw{color:var(--accent)}
.cs-type{color:var(--accent-2)}
.cs-str{color:var(--text)}
.cs-num{color:var(--text)}
.cs-cmt{color:var(--faint);opacity:.8;font-style:italic}

/* ---------------- responsive ---------------- */
@media (max-width:1020px){
  .bus__cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .bus__col--code{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:860px){
  .net,.phys{grid-template-columns:minmax(0,1fr)}
  .net__panel,.phys__panel{border-left:0;border-top:1px solid var(--line)}
  .net__stats{grid-template-columns:repeat(auto-fit,minmax(84px,1fr))}
  .bus__cols{grid-template-columns:minmax(0,1fr)}
  .bus__col+.bus__col{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:860px),(pointer:coarse){
  .net__viewport,.phys__field{height:min(58vh,480px);min-height:360px;touch-action:none}
}

@media (prefers-reduced-motion:reduce){
  .lab-poster__run:hover{transform:none}
}