/* Immersive Construction Experience — dark "site cinema" layer (docs/goal.txt §8,§10,§16,§22,§24).
   Scoped strictly under .im-root; the app shell (app.css) is untouched. All scene growth is
   driven by one custom property per layer (--p) — GPU transforms only, no layout. */

.im-root{height:100%;display:flex;flex-direction:column;background:
  radial-gradient(1200px 700px at 50% -18%,rgba(64,92,138,.35),transparent 60%),
  radial-gradient(900px 520px at 88% 118%,rgba(245,176,76,.05),transparent 55%),
  linear-gradient(180deg,#0a0e17 0%,#0d1320 100%);color:#e8eef7;font-size:12px;overflow:hidden}
.im-root *{box-sizing:border-box}
.im-root button{font:inherit;color:inherit}

/* ── top bar ── */
.im-topbar{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;
  padding:16px 22px 12px;border-bottom:1px solid rgba(122,140,168,.16);
  background:linear-gradient(180deg,rgba(13,19,32,.6),rgba(13,19,32,.15));backdrop-filter:blur(8px)}
.im-kicker{font-size:9px;letter-spacing:2.2px;font-weight:850;color:#7d8fae;text-transform:uppercase}
.im-h1{font-size:21px;font-weight:820;letter-spacing:-.4px;margin:4px 0 3px;color:#f2f6fb}
.im-meta{font-size:10.2px;color:#93a2ba}
.im-simtag,.im-dertag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:8.4px;font-weight:800;
  letter-spacing:.8px;text-transform:uppercase;background:rgba(245,176,76,.12);color:#f5b04c;border:1px solid rgba(245,176,76,.3)}
.im-topbtns{display:flex;gap:8px;align-items:center;flex-shrink:0}
.im-modegrp{display:flex;border:1px solid rgba(122,140,168,.3);border-radius:10px;overflow:hidden}
.im-modeb{border:0;background:transparent;padding:8px 13px;font-size:9.5px;font-weight:800;cursor:pointer;color:#93a2ba;transition:.15s}
.im-modeb.active{background:#f5b04c;color:#1a1410}
.im-modeb:hover:not(.active):not(:disabled){color:#dbe4f0}
.im-modeb:disabled{opacity:.38;cursor:not-allowed}
.im-stop{border:1px solid rgba(122,140,168,.35);background:transparent;border-radius:10px;padding:8px 13px;
  font-size:9.5px;font-weight:800;cursor:pointer;color:#b9c6d8}
.im-stop:hover{border-color:#f5b04c;color:#f5b04c}

/* Phase 3: one amber focus ring for every immersive control that does not
   carry an explicit :focus-visible rule below (same hue/offset family). */
.im-root :is(button,input,[tabindex],[role=button]):focus-visible{
  outline:2px solid rgba(245,176,76,.7);outline-offset:2px}

/* ── main grid ── */
.im-grid{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 296px;grid-template-rows:minmax(0,1fr);gap:14px;padding:14px 22px 16px}
.im-sceneCard{min-width:0;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin}
.im-hud{min-height:0;display:flex;flex-direction:column;gap:2px;padding:16px 15px;border-radius:16px;
  background:linear-gradient(180deg,rgba(19,26,42,.85),rgba(13,19,32,.9));
  border:1px solid rgba(122,140,168,.22);box-shadow:0 18px 50px rgba(0,0,0,.35);overflow-y:auto}

.im-hudhead{font-size:8.6px;letter-spacing:1.8px;font-weight:850;color:#7d8fae;text-transform:uppercase;margin-bottom:10px}
.im-bigrow{margin-bottom:12px}
.im-biglab{font-size:9px;color:#93a2ba;font-weight:750;letter-spacing:1px;text-transform:uppercase}
.im-bigval{font-family:var(--mono);font-size:30px;font-weight:850;letter-spacing:-1px;margin-top:3px;
  color:#ffcf87;text-shadow:0 0 34px rgba(245,176,76,.32),0 1px 0 rgba(0,0,0,.4);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"lnum" 1}
.im-curphase{font-size:10px;color:#aab9cf;margin-top:4px;min-height:14px;font-weight:700}
.im-curphase.im-flip{animation:imPhaseIn .32s cubic-bezier(.2,.7,.25,1)}
/* §quality: ledger share under the headline, and quiet proof-of-coverage rows */
.im-bigsub{font-family:var(--mono);font-size:10px;color:#8fa0bd;margin-top:2px;font-variant-numeric:tabular-nums}
.im-hudmeta{font-size:9.3px;color:#8fa0bd;padding:4px 0}
.im-hudmeta b{color:#9fb0cb;font-weight:600}
.im-noteblok{margin-top:8px;padding:6px 8px;border-left:2px solid rgba(245,176,76,.5);border-radius:2px;
  background:rgba(245,176,76,.06);font-size:9.3px;line-height:1.45;color:#c8b493}
.im-donenote{margin-top:8px;font-size:10.5px;color:#8fa0bd}
@keyframes imPhaseIn{from{opacity:.2;transform:translateY(4px);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
.im-hudrow{display:flex;justify-content:space-between;align-items:baseline;padding:5.5px 0;
  border-bottom:1px dashed rgba(122,140,168,.16);font-size:10.5px;color:#b9c6d8}
.im-hudrow b{font-family:var(--mono);font-size:11px;color:#e8eef7;font-variant-numeric:tabular-nums}
/* category rows open the per-phase drilldown drawer */
.im-hudcat{cursor:pointer;border-radius:6px;margin:0 -6px;padding-left:6px;padding-right:6px;transition:background .14s,color .14s}
.im-hudcat:hover{background:rgba(245,176,76,.07);color:#dbe4f0}
.im-hudcat:active{background:rgba(245,176,76,.12)}
.im-hval{margin-left:auto;display:flex;align-items:baseline;gap:6px}
.im-hrs{font-style:normal;font-family:var(--mono);font-size:9px;color:#7d8fae;font-variant-numeric:tabular-nums}

.im-progring{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;margin:12px 0 4px}
.im-progring svg{width:64px;height:64px;transform:rotate(-90deg)}
.im-ringbg{fill:none;stroke:rgba(122,140,168,.22);stroke-width:3}
.im-ringfg{fill:none;stroke:#f5b04c;stroke-width:3;stroke-linecap:round;stroke-dasharray:97.34;stroke-dashoffset:97.34;transition:stroke-dashoffset .18s linear;filter:drop-shadow(0 0 4px rgba(245,176,76,.55))}
.im-sparklab{font-size:8.4px;letter-spacing:1.4px;color:#7d8fae;text-transform:uppercase;font-weight:800;margin-bottom:4px}
.im-sparkwrap canvas{width:100%;height:44px;display:block}

.im-feedlab{font-size:8.6px;letter-spacing:1.8px;font-weight:850;color:#7d8fae;text-transform:uppercase;margin:12px 0 6px}
/* live receipt lives at the bottom of the scene column (P2): fixed-height,
   internally scrolled, styled like the roster/legend side cards */
.im-feedwrap{flex:none;padding:8px 10px 10px;border-radius:13px;background:rgba(15,22,36,.66);border:1px solid rgba(122,140,168,.2)}
.im-feedwrap .im-feedlab{margin:0 0 6px}
.im-feed{height:130px;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding-right:4px;scrollbar-width:thin}
.im-fhead{display:flex;gap:8px;align-items:baseline;width:100%}
.im-fno{font-family:var(--mono);color:#f5b04c;font-size:8.8px;font-weight:850;flex-shrink:0;font-variant-numeric:tabular-nums}
.im-fdesc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#dbe4f0}
.im-fhead b{margin-left:auto;flex-shrink:0}
.im-fsub{font-size:8.8px;color:#93a2ba;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono)}
.im-fit{padding:6px 9px;border-radius:9px;background:rgba(26,34,52,.72);border:1px solid rgba(122,140,168,.14);
  border-left:2px solid rgba(122,140,168,.3);
  font-size:9.6px;display:flex;gap:8px;align-items:baseline;animation:imFeedIn .26s cubic-bezier(.2,.75,.25,1)}
.im-fit b{margin-left:auto;font-family:var(--mono);color:#ffcf87;font-size:9.6px;white-space:nowrap;font-variant-numeric:tabular-nums}
.im-fcat{color:#b9c6d8;text-transform:lowercase}
.im-fdot{width:7px;height:7px;border-radius:50%;flex-shrink:0;align-self:center}
.im-fdot.materials{background:#43d9c0;box-shadow:0 0 6px rgba(67,217,192,.6)}.im-fdot.labor{background:#5aa2ff;box-shadow:0 0 6px rgba(90,162,255,.6)}.im-fdot.equipment{background:#b98cff;box-shadow:0 0 6px rgba(185,140,255,.6)}
.im-f-phase{background:rgba(245,176,76,.08);border-color:rgba(245,176,76,.3);border-left:2px solid rgba(245,176,76,.6);color:#f5b04c;font-weight:800;font-size:9px;letter-spacing:.6px;text-transform:uppercase}
.im-f-done{border-color:rgba(94,208,148,.4);border-left:2px solid rgba(94,208,148,.6);color:#cfeeda;flex-direction:column;gap:2px}
.im-f-done b{margin-left:0}
.im-f-empty{justify-content:center;color:#7d8fae;font-style:italic;border-left-color:transparent}
/* Phase 3 NOTE: .im-fit deliberately carries NO content-visibility — the feed
   is rebuilt by innerHTML (≤120 ms throttle), so nodes are always fresh and
   remembered sizes never persist; the intrinsic estimate (mixed 1–2-line rows)
   churned the scroller (probe: scrollTop drift under load). Skip > risk. */
.im-hudfoot{margin-top:10px;padding-top:10px;border-top:1px solid rgba(122,140,168,.16);font-size:8.6px;color:#7d8fae;line-height:1.5}
@keyframes imFeedIn{from{opacity:0;transform:translateX(9px)}to{opacity:1;transform:none}}

/* ── lens row + isolation ── */
.im-lensrow{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.im-lensgrp{display:flex;gap:3px;flex-wrap:wrap;border:1px solid rgba(122,140,168,.25);border-radius:11px;padding:3px;
  background:rgba(15,22,36,.6);backdrop-filter:blur(6px)}
.im-lens{border:0;background:transparent;padding:6px 9px;border-radius:8px;font-size:8.8px;font-weight:800;
  letter-spacing:.7px;text-transform:uppercase;cursor:pointer;color:#8b9dbb;transition:.14s}
.im-lens:hover{color:#e8eef7}
.im-lens.active{background:#2b3a58;color:#ffcf87;box-shadow:inset 0 0 0 1px rgba(245,176,76,.35)}
.im-lenshint{font-size:9px;color:#7d8fae;font-style:italic;max-width:44%;text-align:right}
/* lens summary strip: real aggregates for the active lens (P5) */
.im-lensinfo{flex:none;font-size:9.6px;color:#aab9cf;line-height:1.5;padding:6px 11px;border-radius:10px;
  background:rgba(15,22,36,.55);border:1px solid rgba(122,140,168,.16);font-variant-numeric:tabular-nums;min-height:19px}
.im-lensinfo:empty{display:none}
.im-lensinfo b{color:#ffcf87;font-weight:800}
.im-isorow{display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-height:24px}
.im-isolab{font-size:8.4px;letter-spacing:1.2px;color:#6f8098;text-transform:uppercase;font-weight:800}
.im-iso{border:1px solid rgba(122,140,168,.3);background:rgba(20,28,44,.6);border-radius:999px;padding:3px 8px;
  font-size:8.6px;font-weight:750;cursor:pointer;color:#aab9cf;
  transition:border-color .14s,color .14s,background .14s,box-shadow .14s}
.im-iso i{font-style:normal;color:#6f8098;font-family:var(--mono);font-size:8px;margin-left:4px}
.im-iso:hover{border-color:#f5b04c;color:#ffcf87}
.im-iso.active{background:rgba(245,176,76,.16);border-color:#f5b04c;color:#ffcf87;
  box-shadow:0 0 0 1px rgba(245,176,76,.22),0 0 12px rgba(245,176,76,.16)}
.im-iso:focus-visible{outline:2px solid rgba(245,176,76,.65);outline-offset:1px}
.im-isoall{border:0;background:none;color:#5aa2ff;font-size:8.8px;font-weight:800;cursor:pointer;padding:4px 6px}
.im-isoall:hover{text-decoration:underline}

/* ── stage ── */
.im-stage{position:relative;border-radius:18px;overflow:hidden;flex:1 1 0;min-height:0;
  background:#0b0f18;border:1px solid rgba(122,140,168,.26);
  box-shadow:inset 0 0 120px rgba(0,0,0,.55),inset 0 -44px 90px rgba(0,0,0,.32),0 24px 70px rgba(0,0,0,.42);
  transition:box-shadow .6s ease,border-color .6s ease}
.im-root.im-done-on .im-stage{border-color:rgba(245,176,76,.42);
  box-shadow:inset 0 0 120px rgba(0,0,0,.5),inset 0 -44px 90px rgba(0,0,0,.3),0 24px 80px rgba(0,0,0,.45),0 0 64px rgba(245,176,76,.13)}
.im-stage svg{width:100%;height:100%;display:block}
.im-cam{transition:none;will-change:transform}

/* layer growth modes — all GPU-friendly, driven by style="--p" only */
.imL{--p:0;pointer-events:none}
.imL.im-on{pointer-events:auto;cursor:pointer}
.imL[data-mode="grow"]{opacity:calc(var(--p)*6)}
.imL[data-mode="grow"]>g,.imL[data-mode="grow"]>rect,.imL[data-mode="grow"]>path{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(var(--p))}
.imL[data-mode="rise"]{opacity:var(--p);transform:translateY(calc((1 - var(--p)) * 14px))}
.imL[data-mode="dig"]{opacity:calc(var(--p)*4);transform:translateY(calc((1 - var(--p)) * -16px))}
.imL[data-mode="dropfade"]{opacity:var(--p);transform:translateY(calc((1 - var(--p)) * -22px))}
.imL[data-mode="fade"]{opacity:var(--p)}
.imL[data-mode="pop"]{opacity:calc(var(--p)*3);transform-box:fill-box;transform-origin:50% 100%;transform:scale(calc(.35 + var(--p)*.65))}
.imL[data-mode="growX"] .im-seg{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(var(--p))}
.imL[data-mode="growX"] text{opacity:calc(var(--p)*2)}
.imL .im-draw path{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p))}
.imL[data-mode="draw"]{opacity:calc(min(1, var(--p)*4))}
.imL[data-mode="draw"] g[fill]{opacity:var(--p)}

/* completion settle: one-shot brightness flash as a layer tops out (driven by
   JS adding .im-justdone on the 0.999 crossing). Overrides lens filters for
   640ms only — lenses reassert the moment the animation ends. */
.imL.im-justdone{animation:imSettle .64s cubic-bezier(.2,.7,.3,1)}
@keyframes imSettle{0%{filter:brightness(1)}36%{filter:brightness(1.45) saturate(1.12)}100%{filter:brightness(1)}}

/* context ghosts — canonical building anatomy with NO estimate data (data-less,
   non-interactive, dashed grey blueprint so the building reads in every tender) */
.imL[data-mode="ctx"]{opacity:.38;pointer-events:none !important}
.imL.im-ctx rect,.imL.im-ctx polygon,.imL.im-ctx line,.imL.im-ctx path{stroke:#93a5c2;stroke-width:1;stroke-dasharray:6 5}

/* knowledge-state honesty (§24): observed full, derived default, inferred ghosted+dashed, unknown grey */
.imL.ks-inferred{filter:saturate(.72);opacity:calc(var(--p) * .9)}
.imL[data-mode="grow"].ks-inferred,.imL[data-mode="pop"].ks-inferred{opacity:calc(min(1,var(--p)*6) * .9)}
.imL.ks-inferred>g,.imL.ks-inferred>rect,.imL.ks-inferred>polygon{stroke-dasharray:7 5}
.imL.ks-unknown{filter:grayscale(.75) brightness(.72)}
.imL.im-ctx{filter:grayscale(.45) brightness(.92)}  /* ghosts: greyed blueprint, clearly visible */
.imL.im-ghost{filter:grayscale(.9) brightness(.6)}
.imL.im-dimmed{opacity:.14 !important;filter:grayscale(.4);pointer-events:none !important}
.imL.im-ghosted{opacity:.12 !important;filter:grayscale(.5);pointer-events:none !important}
/* Explore: every data bucket stays inspectable — dimmed (isolated-out) and
   zero-cost layers must still be clickable on the completed scene (contract §7) */
.im-root[data-mode="EXPLORE"] .imL.im-dimmed{pointer-events:auto !important}
.im-root[data-mode="EXPLORE"] .imL.im-ctx{pointer-events:none !important}

/* ── spatial v2 (scene_v2) renderer canvas + pick tooltip ── */
.im-stage .im-s3d{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;outline:none;touch-action:none}
.im-s3dsup{display:none} /* legacy building-art layers suppressed while the 3D renderer owns the stage */
.im-s3dtip{position:absolute;z-index:9;pointer-events:none;max-width:250px;padding:7px 10px;border-radius:9px;
  background:rgba(16,23,38,.96);border:1px solid rgba(122,140,168,.4);box-shadow:0 10px 30px rgba(0,0,0,.5);
  font-size:9.2px;color:#c6d2e2;transform:translate(-50%,-118%)}
.im-s3dtip[hidden]{display:none}
.im-s3dtip b{display:block;font-size:9.6px;color:#e8eef7;margin-bottom:1px}
.im-s3dtip span{font-size:8.6px;color:#93a2ba;font-family:var(--mono)}

/* per-lens stage colour grade + per-layer scene transforms (JS sets inline filters;
   grade guarantees every lens visibly re-lights the whole site cinema) */
.im-stage svg{transition:filter .3s ease}
.im-root[data-lens] .imL{transition:filter .28s ease,opacity .28s ease}
.im-root[data-lens="COST"] .im-stage svg{filter:saturate(1.22) hue-rotate(-8deg) brightness(1.03)}
.im-root[data-lens="LABOR"] .im-stage svg{filter:saturate(1.3) hue-rotate(16deg) brightness(1.0)}
.im-root[data-lens="MATERIALS"] .im-stage svg{filter:sepia(.14) hue-rotate(36deg) saturate(1.3) brightness(1.01)}
.im-root[data-lens="SCHEDULE"] .im-stage svg{filter:saturate(1.45) hue-rotate(-22deg) contrast(1.04)}
.im-root[data-lens="RISK"] .im-stage svg{filter:sepia(.22) hue-rotate(-28deg) saturate(1.5) contrast(1.06) brightness(.97)}
.im-root[data-lens="CONFIDENCE"] .im-stage svg{filter:saturate(1.06) brightness(1.05)}
.im-root[data-lens="EVIDENCE"] .im-stage svg{filter:sepia(.14) hue-rotate(58deg) saturate(1.28)}

/* per-layer emphasis per lens (P5): --heat is set by applyLens() per .imL, so the
   tint varies layer-by-layer — not only the stage-wide grade above. Data-less
   context ghosts (.im-ctx, no data-bucket) stay untouched. */
.im-root[data-lens="COST"] .imL[data-bucket]{fill-opacity:calc(.18 + var(--heat,0)*.82);filter:brightness(calc(.82 + var(--heat,0)*.36))}
.im-root[data-lens="LABOR"] .imL[data-bucket]{fill-opacity:calc(.3 + var(--heat,0)*.7)}
.im-root[data-lens="MATERIALS"] .imL[data-bucket]{fill-opacity:calc(.3 + var(--heat,0)*.7)}
.im-root[data-lens="SCHEDULE"] .imL[data-bucket]{fill-opacity:calc(.45 + var(--heat,0)*.55)}
.im-root[data-lens="RISK"] .imL[data-bucket]{fill-opacity:calc(.38 + var(--heat,0)*.62) /* risky (high heat) stays bright */}
.im-root[data-lens="CONFIDENCE"] .imL[data-bucket]{fill-opacity:calc(.25 + var(--heat,0)*.75)}
.im-root[data-lens="EVIDENCE"] .imL[data-bucket]{fill-opacity:calc(.3 + var(--heat,0)*.7)}

/* evidence lens badge dots (injected into #imBadges by JS, viewBox coords) */
.im-badges{pointer-events:none}
.im-evbadge circle{fill:#43d985;stroke:#0a0e17;stroke-width:2;filter:drop-shadow(0 0 6px rgba(67,217,133,.8))}
.im-evbadge text{fill:#08140d;font-size:9.5px;font-weight:850;font-family:var(--mono)}

/* explode fan-out: layers lift apart by vertical stack index (--yi set per layer) */
.im-root.im-exploded .imL{transition:translate .55s cubic-bezier(.2,.7,.2,1.1)}
.im-root.im-exploded .imL[data-bucket],.im-root.im-exploded .imL.im-ctx{translate:0 calc(-1 * max(0, var(--yi,0) - 2) * 10px)}

/* schedule lens: hue ramp by phase order (set as inline filter per layer) */
.im-evbadge{pointer-events:none}

.im-pulse{fill:none;stroke:#f5b04c;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.im-pulse.on{animation:imPulse .8s cubic-bezier(.16,.7,.3,1)}
@keyframes imPulse{0%{opacity:.95;stroke-width:3;transform:scale(.32)}70%{opacity:.32}100%{opacity:0;stroke-width:.6;transform:scale(1.65)}}

.im-crane-load{animation:imSway 7.5s ease-in-out infinite}
@keyframes imSway{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
.im-beacon{animation:imBeacon 3.4s ease-in-out infinite}
@keyframes imBeacon{0%,100%{opacity:.16}50%{opacity:.95}}
.im-scaf,.im-fence{transition:opacity .5s ease}
/* site glow breathes gently once the build has settled (pure decoration) */
.im-root.im-done-on .im-siteglow{animation:imBreathe 6.5s ease-in-out infinite}
@keyframes imBreathe{0%,100%{opacity:.82}50%{opacity:1}}

/* ── chips + sparks overlay ── */
.im-chips{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.im-chip{position:absolute;min-width:118px;padding:8px 11px;border-radius:11px;pointer-events:none;
  will-change:transform,left,top,opacity;
  background:linear-gradient(180deg,rgba(30,39,60,.95),rgba(20,27,43,.92));
  border:1px solid rgba(122,140,168,.42);border-left:2px solid rgba(122,140,168,.5);backdrop-filter:blur(6px);
  box-shadow:0 14px 40px rgba(0,0,0,.55),0 2px 10px rgba(0,0,0,.3);opacity:0;transform:translate(-50%,-50%)}
.im-chip strong{display:block;font-size:9px;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:2px}
.im-chip small{color:#93a2ba;font-size:9.5px;font-family:var(--mono);font-variant-numeric:tabular-nums}
.im-chip-materials strong{color:#43d9c0}.im-chip-labor strong{color:#5aa2ff}.im-chip-equipment strong{color:#b98cff}
.im-chip-materials{border-left-color:rgba(67,217,192,.75)}
.im-chip-labor{border-left-color:rgba(90,162,255,.75)}
.im-chip-equipment{border-left-color:rgba(185,140,255,.75)}
.im-spark{position:absolute;width:5px;height:5px;border-radius:50%;background:#ffd17a;pointer-events:none;
  box-shadow:0 0 8px rgba(255,209,122,.8)}

/* ambient dust motes — pure atmosphere while a build/replay runs (aria-hidden,
   zero data implied, hidden under prefers-reduced-motion) */
.im-motes{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .9s ease;z-index:2}
.im-root.im-live .im-motes{opacity:1}
.im-mote{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(255,228,178,.5);
  box-shadow:0 0 7px rgba(255,214,150,.5);animation:imMoteFloat 9s ease-in-out infinite}
.im-mote:nth-child(2n){width:2px;height:2px;animation-duration:11s}
.im-mote:nth-child(3n){animation-duration:7.2s;animation-delay:-3s}
.im-mote:nth-child(4n){animation-delay:-5s}
.im-mote:nth-child(5n){animation-delay:-1.6s;animation-duration:10.4s}
@keyframes imMoteFloat{0%,100%{transform:translate(0,0)}25%{transform:translate(7px,-15px)}50%{transform:translate(-5px,-24px)}75%{transform:translate(-11px,-9px)}}

/* ── start overlay / done overlay / replay overlay ── */
.im-startov{position:absolute;inset:0;display:grid;place-items:center;background:
  radial-gradient(600px 340px at 50% 60%,rgba(245,176,76,.06),transparent 70%);transition:opacity .4s;z-index:5}
.im-startov.gone{opacity:0;pointer-events:none}
.im-startcard{text-align:center;max-width:400px;padding:26px}
.im-build{border:0;border-radius:14px;padding:16px 44px;font-size:15px;font-weight:850;letter-spacing:2.5px;
  background:linear-gradient(180deg,#ffc357,#e89c2e);color:#201405;cursor:pointer;
  box-shadow:0 0 0 1px rgba(255,195,87,.4),0 14px 60px rgba(245,176,76,.35),0 0 110px rgba(245,176,76,.16);
  transition:transform .16s cubic-bezier(.2,.7,.3,1),box-shadow .16s ease}
.im-build:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,195,87,.6),0 20px 80px rgba(245,176,76,.45)}
.im-build:active{transform:translateY(0) scale(.985)}
.im-build:focus-visible{outline:2px solid #ffd17a;outline-offset:3px}
.im-startcard p{color:#aab9cf;font-size:10.5px;line-height:1.6;margin:14px 0 0}
.im-startcard .im-illus{color:#6f8098;font-size:8.8px;font-style:italic}
.im-root[data-mode="EXPLORE"] .im-startov{display:none}

.im-noteov{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);padding:8px 16px;border-radius:10px;
  background:rgba(22,30,48,.92);border:1px dashed rgba(245,176,76,.5);color:#ffcf87;font-size:9.5px;z-index:6}

.im-doneov{position:absolute;inset:0;display:grid;place-items:center;z-index:7;pointer-events:none}
.im-doneov[hidden]{display:none}
.im-donecard{position:relative;pointer-events:none;text-align:center;padding:32px 50px;border-radius:20px;
  background:linear-gradient(180deg,rgba(23,31,49,.95),rgba(17,23,36,.93));
  border:1px solid rgba(245,176,76,.4);box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 50px rgba(245,176,76,.08);overflow:hidden}
/* the card itself must not shadow the finished scene — only its controls click through */
.im-donecard button,.im-donecard a{pointer-events:auto}
.im-donecard::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,207,135,.75),transparent)}
.im-doneov:not([hidden]) .im-donecard{animation:imDoneIn .55s cubic-bezier(.18,.9,.26,1.06) both}
@keyframes imDoneIn{from{opacity:0;transform:translateY(12px) scale(.955)}to{opacity:1;transform:none}}
.im-donekick{font-size:9px;letter-spacing:2.4px;font-weight:850;color:#f5b04c;text-transform:uppercase}
.im-donebig{font-family:var(--mono);font-size:38px;font-weight:850;letter-spacing:-1.2px;color:#ffdf9e;margin:10px 0 4px;
  font-variant-numeric:tabular-nums;text-shadow:0 0 40px rgba(245,176,76,.35)}
.im-doneline{font-size:11px;color:#b9c6d8}
.im-donetag{margin-top:10px;display:inline-block;font-size:8.4px;letter-spacing:1px;text-transform:uppercase;color:#7d8fae;
  border:1px solid rgba(122,140,168,.3);padding:3px 9px;border-radius:999px}
.im-doneclose{position:absolute;top:8px;right:10px;border:0;background:none;color:#7d8fae;font-size:18px;cursor:pointer;transition:color .14s}
.im-doneclose:hover{color:#ffcf87}
.im-shimmer{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.im-doneov:not([hidden]) .im-shimmer::before{content:"";position:absolute;top:-20%;bottom:-20%;width:38%;left:-45%;
  background:linear-gradient(100deg,transparent,rgba(255,223,158,.11),transparent);transform:skewX(-18deg);
  animation:imSweep 3.4s cubic-bezier(.3,.4,.3,1) .2s 1 forwards}
@keyframes imSweep{to{left:130%}}

/* replay (§7) */
.im-replayov{position:absolute;top:14px;right:14px;bottom:14px;width:min(330px,46%);z-index:8;pointer-events:none}
.im-replayov[hidden]{display:none}
.im-replaycard{pointer-events:auto;height:100%;display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:15px;
  background:linear-gradient(180deg,rgba(21,29,45,.96),rgba(15,21,33,.95));
  border:1px solid rgba(245,176,76,.35);border-left:3px solid rgba(245,176,76,.6);
  box-shadow:0 24px 70px rgba(0,0,0,.55);overflow-y:auto}
.im-replayov:not([hidden]) .im-replaycard{animation:imRpIn .34s cubic-bezier(.2,.75,.25,1) both}
@keyframes imRpIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.im-replaycard>*{animation:imFeedIn .3s cubic-bezier(.2,.75,.25,1) both}
.im-replaycard>*:nth-child(2){animation-delay:.04s}
.im-replaycard>*:nth-child(3){animation-delay:.08s}
.im-replaycard>*:nth-child(4){animation-delay:.12s}
.im-replaycard>*:nth-child(5){animation-delay:.16s}
.im-replaycard>*:nth-child(n+6){animation-delay:.2s}
.im-rp-kick{font-size:9px;letter-spacing:1.8px;font-weight:850;color:#f5b04c;text-transform:uppercase}
.im-rp-kind{font-size:16px;font-weight:820;color:#f2f6fb;letter-spacing:-.2px}
.im-rp-row{display:flex;justify-content:space-between;border-bottom:1px dashed rgba(122,140,168,.2);padding:5px 0;font-size:10px;color:#aab9cf}
.im-rp-row b{font-family:var(--mono);color:#e8eef7;font-variant-numeric:tabular-nums}
.im-rp-res{font-size:9px;color:#7d8fae;line-height:1.5}
.im-rp-stepof{font-family:var(--mono);font-size:8.6px;color:#93a2ba;margin-top:auto}
.im-rp-exit{border:1px solid rgba(122,140,168,.4);background:transparent;border-radius:10px;padding:9px;
  font-size:10px;font-weight:800;cursor:pointer;color:#ffcf87;margin-top:6px;transition:border-color .14s,background .14s,transform .14s}
.im-rp-exit:hover{border-color:#f5b04c;background:rgba(245,176,76,.1)}
.im-rp-exit:active{transform:translateY(1px)}

/* ── transport ── */
.im-transport{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:9px 12px;border-radius:13px;background:rgba(15,22,36,.78);border:1px solid rgba(122,140,168,.22)}
.im-tbtns{display:flex;gap:4px}
.im-tbtns button{min-width:34px;padding:7px 8px;border-radius:9px;border:1px solid rgba(122,140,168,.28);
  background:transparent;color:#c6d2e2;font-size:11px;cursor:pointer;
  transition:border-color .13s,color .13s,transform .13s,background .13s}
.im-tbtns button:hover{border-color:#f5b04c;color:#ffcf87;background:rgba(245,176,76,.06)}
.im-tbtns button:active{transform:translateY(1px)}
.im-tbtns button:focus-visible{outline:2px solid rgba(245,176,76,.65);outline-offset:1px}
.im-tbtns .im-play{background:#f5b04c;border-color:#f5b04c;color:#201405;min-width:42px;font-weight:850}
.im-tbtns .im-play:hover{transform:scale(1.05);background:#ffc357}
.im-tbtns .im-play:active{transform:scale(.97)}
.im-spds{display:flex;gap:3px;border:1px solid rgba(122,140,168,.25);border-radius:9px;padding:2px}
.im-spd{border:0;background:transparent;padding:5px 8px;border-radius:7px;font-size:9px;font-weight:800;cursor:pointer;color:#8b9dbb;font-family:var(--mono);transition:background .13s,color .13s,transform .13s}
.im-spd:hover{color:#dbe4f0}
.im-spd.active{background:#2b3a58;color:#ffcf87;box-shadow:inset 0 0 0 1px rgba(245,176,76,.25)}
.im-spd:active{transform:translateY(1px)}
.im-track{position:relative;padding:15px 0 13px}
.im-track input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:99px;background:linear-gradient(90deg,#f5b04c var(--fill,0),#2a3850 var(--fill,0));outline:none;cursor:pointer}
.im-track input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;background:#ffcf87;border:2px solid #e89c2e;box-shadow:0 0 14px rgba(245,176,76,.6);cursor:grab;transition:box-shadow .15s ease}
.im-track input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 14px rgba(245,176,76,.7),0 0 0 6px rgba(245,176,76,.15)}
.im-track input[type=range]:active::-webkit-slider-thumb{cursor:grabbing;box-shadow:0 0 18px rgba(245,176,76,.85),0 0 0 8px rgba(245,176,76,.2)}
.im-track input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#ffcf87;border:2px solid #e89c2e;box-shadow:0 0 14px rgba(245,176,76,.6);cursor:grab;transition:box-shadow .15s ease}
.im-track input[type=range]:hover::-moz-range-thumb{box-shadow:0 0 14px rgba(245,176,76,.7),0 0 0 6px rgba(245,176,76,.15)}
.im-track input[type=range]:active::-moz-range-thumb{cursor:grabbing}
.im-track input[type=range]:focus-visible{outline:2px solid rgba(245,176,76,.6);outline-offset:4px}
.im-ticks{position:absolute;left:0;right:0;top:2px;height:11px;pointer-events:none}
.im-tick{position:absolute;top:0;transform:translateX(-50%);pointer-events:auto;cursor:pointer;text-align:center}
.im-tick i{display:block;width:2px;height:7px;background:#5b6d8c;margin:0 auto;transition:background .12s,height .12s}
.im-tick span{font-size:7.4px;color:#6f8098;font-family:var(--mono);transition:color .12s}
.im-tick:hover i{background:#f5b04c;height:10px}
.im-tick:hover span{color:#c6d2e2}
.im-tiptool{position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);white-space:nowrap;z-index:9;
  padding:8px 12px;border-radius:10px;background:rgba(16,23,38,.97);border:1px solid rgba(245,176,76,.32);box-shadow:0 14px 40px rgba(0,0,0,.55)}
.im-tiptool::after{content:"";position:absolute;top:100%;left:50%;width:8px;height:8px;
  transform:translate(-50%,-4.5px) rotate(45deg);background:rgba(16,23,38,.97);
  border-right:1px solid rgba(245,176,76,.32);border-bottom:1px solid rgba(245,176,76,.32)}
.im-tiptool b{display:block;font-size:10px;color:#e8eef7;max-width:260px;overflow:hidden;text-overflow:ellipsis}
.im-tiptool span{font-size:8.8px;color:#93a2ba;font-family:var(--mono);font-variant-numeric:tabular-nums}
.im-daylab{font-size:9px;color:#93a2ba;font-family:var(--mono);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ── roster strip ── */
.im-roster{display:flex;gap:5px;align-items:stretch;overflow-x:auto;padding:8px 10px;border-radius:13px;
  background:rgba(15,22,36,.66);border:1px solid rgba(122,140,168,.2);min-height:50px;scrollbar-width:thin;scrollbar-color:#3a4a66 transparent}
.im-rosterhead{display:flex;flex-direction:column;justify-content:center;min-width:132px;border-right:1px solid rgba(122,140,168,.2);padding-right:9px;flex-shrink:0}
.im-rosterhead b{font-size:10px;color:#e8eef7;font-weight:800;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.im-rosterhead span{font-size:8.4px;color:#7d8fae;font-family:var(--mono);font-variant-numeric:tabular-nums}
.im-rrow{display:flex;flex-direction:column;gap:3px;justify-content:center;min-width:142px;padding:5px 9px;border-radius:9px;
  border:1px solid rgba(122,140,168,.18);background:rgba(22,30,48,.5);cursor:pointer;text-align:left;
  transition:border-color .14s,background .14s}
.im-rrow:hover{border-color:rgba(245,176,76,.55);background:rgba(30,40,60,.6)}
.im-rrow:focus-visible{outline:2px solid rgba(245,176,76,.7);outline-offset:1px}
/* Phase 3: horizontal roster defers off-screen rows; inline estimate 150px
   (min-width 142 + padding) keeps the track length stable until measured. */
.im-rrow{content-visibility:auto;contain-intrinsic-size:auto 150px auto 50px}
.im-rrow.done{border-color:rgba(94,208,148,.55);background:linear-gradient(180deg,rgba(24,44,34,.5),rgba(20,36,28,.4))}
.im-rno{font-family:var(--mono);font-size:8px;color:#f5b04c;font-weight:800;font-variant-numeric:tabular-nums}
.im-rtitle{font-size:9.2px;color:#c6d2e2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:126px}
.im-rpip{height:3px;border-radius:99px;background:#26314a;overflow:hidden}
.im-rpip i{display:block;height:100%;background:linear-gradient(90deg,#e89c2e,#ffd17a);box-shadow:0 0 6px rgba(245,176,76,.4)}
.im-reur{font-family:var(--mono);font-size:8.6px;color:#93a2ba;font-variant-numeric:tabular-nums}
.im-rmore{min-width:96px;display:grid;place-items:center;color:#7d8fae;font-size:9px;border:1px dashed rgba(122,140,168,.3);border-radius:9px}
.im-rosterempty{color:#6f8098;font-size:9.6px;font-style:italic;display:grid;place-items:center;width:100%}

/* ── legend ── */
.im-legendrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:2px 2px 0}
.im-leg{display:flex;gap:6px;align-items:center;font-size:8.6px;color:#8b9dbb;font-weight:700}
.im-leg i{width:8px;height:8px;border-radius:50%}
.im-leg-observed i{background:#5ed094;box-shadow:0 0 8px rgba(94,208,148,.5)}
.im-leg-derived i{background:#5aa2ff}
.im-leg-inferred i{background:#b98cff;border-radius:2px;box-shadow:0 0 0 1.4px #b98cff inset;background:transparent}
.im-leg-unknown i{background:#556}
.im-legnote{font-size:8.4px;color:#5f6f88;font-style:italic;margin-left:auto}

/* corridor variant tweaks */
.im-corridor .imL[data-mode]{opacity:calc(var(--p)*4)}

/* site-works schematic (SITE_WORKS) — plan-ish ground plots; growth via var(--p) */
.im-site .im-plot-rect{stroke-dasharray:none;filter:drop-shadow(0 3px 8px rgba(0,0,0,.35))}
.im-site text{pointer-events:none;font-family:inherit}
.im-site .im-fittings circle{fill:#b8c6dd}
.imL[data-mode="rise"] .im-plot{transform-box:fill-box;transform-origin:50% 100%;transform:none}

/* reduced motion — every animated layer settles instantly or fades; the scene
   stays fully readable and honest, only the choreography collapses */
@media (prefers-reduced-motion: reduce){
  .im-fit,.im-replayov:not([hidden]) .im-replaycard,.im-replaycard>*,
  .im-doneov:not([hidden]) .im-donecard,.im-curphase.im-flip{animation-duration:.01ms;animation-delay:0s}
  .imL.im-justdone{animation:none}
  .im-pulse.on{animation:none;opacity:0}
  .im-crane-load,.im-beacon,.im-mote{animation:none}
  .im-motes{display:none}
  .im-root.im-done-on .im-siteglow{animation:none}
  .im-doneov:not([hidden]) .im-shimmer::before{animation:none;opacity:0}
  .im-root[data-lens] .imL,.im-stage svg,.im-ringfg{transition:none}
  .im-chip{transition:none}
  .im-build,.im-tbtns button,.im-spd,.im-rp-exit,
  .im-track input[type=range]::-webkit-slider-thumb{transition:none}
}

/* responsive */
@media(max-width:1150px){.im-grid{grid-template-columns:minmax(0,1fr) 250px}.im-bigval{font-size:25px}}
@media(max-width:900px){.im-grid{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}.im-hud{order:2}.im-transport{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto}.im-track{grid-column:1/-1}.im-daylab{display:none}.im-lenshint{display:none}}
@media(max-width:620px){.im-transport{grid-template-columns:1fr}.im-tbtns{justify-content:center}.im-spds{justify-content:center}.im-topbar{padding:12px 14px 9px}.im-grid{padding:10px}}

/* Keep the scene usable before secondary content consumes viewport height. */
.im-root{overflow-y:auto;overflow-x:hidden}
.im-root [hidden]{display:none !important}
.im-topbar{flex:none;padding:10px 16px 8px;gap:12px;flex-wrap:wrap}
.im-grid{flex:1 0 auto;min-height:600px;grid-template-rows:auto;padding:10px 16px;gap:12px}
.im-sceneCard{overflow:visible;gap:6px}
.im-sceneCard>*{flex-shrink:0}
.im-stage{flex:1 0 360px;min-height:360px}
.im-hud{overflow:visible;align-self:start;padding:12px}
.im-transport{padding:5px 8px;gap:6px}
.im-feedwrap{padding:7px 10px}
.im-feedwrap summary{cursor:pointer;min-height:24px;align-content:center}
.im-feedwrap:not([open]) .im-feedlab{margin:0}
.im-feed{height:auto;max-height:130px}
.im-root summary:focus-visible{outline:2px solid #f5b04c;outline-offset:2px}
@media(max-width:900px){
 .im-grid{grid-template-columns:1fr;grid-template-rows:auto auto}
 .im-stage{flex-basis:360px}
}
@media(max-width:620px){
 .im-grid{padding:8px}
 .im-stage{min-height:300px;flex-basis:300px}
 .im-h1{overflow-wrap:anywhere}
}

/* plan §5: cost-heatmap legend gradient swatch (mirrors renderer costColor ramp) */
.im-viewleg{display:inline-flex;align-items:center;gap:7px}
.im-costgrad{display:inline-block;width:64px;height:8px;border-radius:5px;border:1px solid rgba(143,163,184,.4);
  background:linear-gradient(90deg,#33507d 0%,#e8b04c 55%,#e2574b 100%)}

/* plan §11: clipping plane position slider (compact, inline with section modes) */
.im-secslider{width:110px;vertical-align:middle;margin-left:8px}

/* item 25 (revised): viewer tools live in the left sidebar under History.
   The sidebar is ~213px: five vertical groups — label on its own line, chips
   below it (wrap allowed), 10px between groups, sliders flex to full width and
   the explode % rides the slider's right edge. NO inner scrollbar at normal
   viewport heights; scroll only when the browser window is genuinely short. */
.im-sidetools{display:flex;flex-direction:column;gap:10px;margin:14px 3px 10px;padding:10px 9px;
  border:1px solid var(--line,#26324a);border-radius:12px;overflow:visible;min-height:0}
.im-sidetools[hidden]{display:none}
.im-sidetools .im-isorow{display:flex;flex-wrap:wrap;column-gap:4px;row-gap:5px;min-height:0;padding:0;margin:0;align-items:center}
.im-sidetools .im-isolab{font-size:9.5px;letter-spacing:.4px;text-transform:uppercase;opacity:.65;flex-basis:100%;margin-bottom:1px}
.im-sidetools .im-iso{padding:2px 7px;font-size:9.8px}
.im-sidetools .im-secslider{flex:1;min-width:0;margin-left:0}
.im-sidetools .im-viewleg{font-size:8.8px;font-weight:400;letter-spacing:0;text-transform:none;flex-basis:100%;margin-top:1px}
.im-sidetools #imExplodeVal{flex-basis:auto;opacity:.9;margin-left:6px}
@media (max-height:620px){
  .im-sidetools{overflow-y:auto;max-height:calc(100vh - 300px)}
}

/* item 25: floating measurement distance label, riding the exploded midpoint */
.im-measlab{position:absolute;z-index:10;pointer-events:none;padding:2px 8px;border-radius:8px;
  background:rgba(12,18,28,.85);border:1px solid rgba(255,196,107,.55);color:#ffc46b;
  font-size:11px;font-weight:600;white-space:nowrap}

/* plan §14: object tree — compact nested disclosure tree in the HUD column */
.im-treewrap{margin-top:10px;border-top:1px solid rgba(143,163,184,.18);padding-top:6px}
.im-tree{max-height:40vh;overflow:auto;font-size:11.5px;line-height:1.5}
.im-tree details{margin:0 0 0 8px}
.im-tree>details{margin-left:0}
.im-tree summary{cursor:pointer;user-select:none;font-weight:600;color:#c8d6e8;padding:2px 4px;border-radius:6px;display:flex;align-items:center;gap:6px}
.im-tree summary:hover{background:rgba(143,163,184,.12)}
.im-tcnt{margin-left:auto;font-weight:400;opacity:.6;font-size:10px}
.im-trow{display:flex;align-items:center;gap:6px;padding:1px 4px 1px 18px;border-radius:6px;cursor:pointer;color:#b8c7da}
.im-trow:hover{background:rgba(143,163,184,.10)}
.im-trow.active{background:rgba(255,196,107,.16);color:#ffd98a}
.im-trow.im-t-hidden{opacity:.42;font-style:italic}
.im-tlabel{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.im-teye{background:none;border:0;cursor:pointer;font-size:11px;opacity:.55;padding:0 2px}
.im-teye:hover{opacity:1}
.im-teye.im-eye-off{opacity:.22;text-decoration:line-through}