/* Inference engine: the home page close. Every rule is scoped under .engine.
   Colours, type and the header height come from the MISH identity tokens (mish-identity.css) with fallbacks, so the
   section renders correctly with or without that sheet. Brass marks a person (a by-hand handoff, an approval, an
   example label); mint is the automation and Claude; body is a local model. Keyboard focus takes --mish-focus (amber on
   the dark stage) and umber on the paper plan; neither is ever a text or status colour. On paper, brass is a rule or a
   marker only and the words are ink.
   Layout: the section is a size container, so one breakpoint, on its own content width, drives the grid, the map and
   where the run log sits. One column below 1006px (the map over the trace, the log under the map); two columns from
   1006px (about a 1094px window), with the trace beside the map and the log in the trace. The column widths step up at
   1170px and 1300px so the wide map never draws below 0.786 scale, which keeps its smallest text (14 units) at 11px or
   more; on one column the map's height cap never goes below that scale either. The tall, one-automation-at-a-time map
   is for phones only (640px and below), always inside one column.
   engine.mjs reads --e-cols from the grid to know which layout is showing. */

.engine{
  --e-abyss:var(--mish-abyss,#100b1d);--e-deep:var(--mish-deep,#180f28);--e-lift:var(--mish-lift,#302047);
  --e-rule:var(--mish-rule,#58466d);--e-edge:var(--mish-edge,#9883af);
  --e-light:var(--mish-light,#fbf7ff);--e-body:var(--mish-body,#ded7ea);--e-muted:var(--mish-muted,#c1b4d0);--e-dim:var(--mish-dim,#b2a1c6);
  --e-mint:var(--mish-mint,#63d7e3);--e-mint-hi:var(--mish-mint-hover,#a3eff6);--e-on-mint:var(--mish-on-mint,#180f28);
  --e-teal:var(--mish-teal,#006274);--e-brass:var(--mish-brass,#ffb16b);--e-focus:var(--mish-focus,#ffb16b);--e-focus-paper:var(--mish-umber,#8b4215);
  --e-paper:var(--mish-paper,#f5f0fb);--e-ink:var(--mish-ink,#251637);--e-ink-muted:var(--mish-ink-muted,#62536f);
  --e-paper-rule:var(--mish-paper-rule,#d8cde4);--e-sage:var(--mish-sage,#e8def2);
  --e-display:var(--mish-font-display,Montserrat,'Avenir Next','Segoe UI',system-ui,sans-serif);
  --e-sans:var(--mish-font-body,Montserrat,'Avenir Next','Segoe UI',system-ui,sans-serif);
  --e-mono:var(--mish-font-mono,'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);
  --e-header:var(--mish-header-h,64px);
  --e-gutter:var(--mish-gutter,clamp(16px,4vw,56px));
  --e-ease:var(--mish-ease,cubic-bezier(.16,1,.3,1));
  --e-panel:var(--mish-lift);--e-well:var(--mish-lift);--e-node:rgba(36,19,54,.8);--e-node-edge:#89929e;--e-brass-well:rgba(54,33,37,.8);
  container:engine/inline-size;
  position:relative;box-sizing:border-box;padding:clamp(48px,7vw,96px) var(--e-gutter) clamp(56px,7vw,104px);
  background:var(--e-deep);
  color:var(--e-body);font:400 16px/1.6 var(--e-sans);font-synthesis:none;-webkit-font-smoothing:antialiased;
  overflow:clip;scroll-margin-top:var(--e-header);color-scheme:dark
}
.engine *,.engine *::before,.engine *::after{box-sizing:border-box}
.engine :where(h2,h3,h4,p,ul,ol,dl,dd,figure){margin:0}
.engine :where(button,input){font:inherit;color:inherit}
.engine button{cursor:pointer}
.engine button:disabled{cursor:default}
.engine [hidden]{display:none!important}
.engine a{color:inherit}
.engine :focus-visible{outline:3px solid var(--e-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--e-deep)}
.engine [tabindex="-1"]:focus{outline:none;box-shadow:none}
.engine .e-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.engine .e-k{font:500 12px/1.3 var(--e-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--e-dim)}
.engine .e-slot{display:contents}
.engine svg path{vector-effect:none}

/* ---------- grid: one column here; two in the container queries below ---------- */
.engine .e-grid{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"ask" "map";gap:32px 0;align-items:start;scroll-margin-top:calc(var(--e-header) + 12px)}
.engine.is-running .e-grid{grid-template-areas:"q" "map" "trace";gap:12px 0}
.engine .e-ask{grid-area:ask;max-width:680px}
.engine .e-query{grid-area:q}
.engine .e-trace{grid-area:trace}
.engine .e-mapcol{grid-area:map;min-width:0;align-self:start}

/* ---------- ask ---------- */
.engine .e-kicker{display:flex;align-items:center;gap:10px;margin-bottom:16px;font:500 12px/1.4 var(--e-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--e-muted)}
.engine .e-kicker::before{content:'';flex:none;width:18px;height:9px;background:linear-gradient(90deg,var(--e-muted) 0 50%,#ffb03f 56%,#ff7f3a 75%,#ff3f86 90%,#f2167c);-webkit-mask:url(assets/brand/mn-glyph.svg) center/contain no-repeat;mask:url(assets/brand/mn-glyph.svg) center/contain no-repeat}
.engine .e-title{font:600 clamp(1.75rem,1.425rem + 1.3333vw,2.625rem)/1.1 var(--e-display);letter-spacing:-.035em;color:var(--e-light);text-wrap:balance;margin-bottom:14px}
.engine .e-intro{font-size:clamp(.9375rem,.8911rem + .1905vw,1.0625rem);line-height:1.6;color:var(--e-body);max-width:46ch;margin-bottom:20px}
.engine .e-promise{font-size:15px;line-height:1.6;font-weight:600;color:#99e7ef;padding-left:14px;border-left:3px solid #63d7e3;margin-bottom:22px}
.engine .e-form{display:flex;flex-wrap:wrap;gap:5px;align-items:stretch;border:1px solid var(--e-edge);background:var(--mish-lift);border-radius:3px;padding:5px;transition:border-color .2s}
.engine .e-form:focus-within{border-color:var(--e-mint)}
.engine .e-input{flex:999 1 240px;min-width:0;background:transparent;border:0;outline:0;color:var(--e-light);font-size:16px;padding:11px 12px}
.engine .e-input::placeholder{color:#b2a1c6}
/* The identity's two-tone ring, like every other control; the 2px gap is the form's own background. */
.engine .e-input:focus-visible{outline:3px solid var(--e-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--e-abyss)}
.engine .e-go{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:3px;background:var(--e-mint);color:var(--e-on-mint);font-weight:600;font-size:14px;padding:0 16px;min-height:46px;white-space:nowrap;transition:background .18s}
.engine .e-go:hover{background:var(--e-mint-hi)}
.engine .e-go svg,.engine .e-btn svg,.engine .see-plan svg,.engine .run-btn svg{width:18px;height:18px;flex:none}
.engine .e-go svg path,.engine .e-btn svg path,.engine .see-plan svg path,.engine .run-btn svg path{fill:none;stroke:currentColor;stroke-width:1.6}
.engine .e-note{margin-top:10px;padding:10px 13px;border-left:2px solid var(--e-brass);background:rgba(255,177,107,.08);font-size:13px;line-height:1.55;color:var(--e-body)}
.engine .e-note b{display:block;margin-bottom:2px;font-weight:600;color:var(--e-brass)}
.engine .e-hint{font:400 12.5px/1.5 var(--e-mono);color:var(--e-muted);margin:10px 2px 0;min-height:19px}
.engine .e-hint b{color:var(--e-mint);font-weight:600}
.engine .e-chips-k{margin:22px 0 10px}
.engine .e-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;list-style:none;padding:0}
.engine .e-chips li:last-child:nth-child(odd){grid-column:1/-1}
.engine .e-chip{width:100%;height:100%;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.015);border:1px solid var(--e-edge);color:var(--e-body);border-radius:3px;padding:9px 11px;min-height:56px;text-align:left;transition:border-color .18s,background .18s}
.engine .e-chip svg{width:18px;height:18px;flex:none}
.engine .e-chip svg path{fill:none;stroke:var(--e-mint);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.engine .e-chip span{display:flex;flex-direction:column;gap:2px;min-width:0}
.engine .e-chip b{font-size:13.5px;font-weight:600;line-height:1.25;color:var(--e-light)}
.engine .e-chip small{font:400 12px/1.3 var(--e-mono);color:var(--e-muted)}
.engine .e-chip:hover,.engine .e-chip:focus-visible{border-color:var(--e-mint);background:rgba(99,215,227,.07)}

/* ---------- query strip (running) ---------- */
.engine .e-query{display:flex;justify-content:space-between;align-items:flex-start;gap:12px 24px;border:1px solid var(--e-rule);border-radius:6px;background:var(--e-panel);padding:10px 14px;min-width:0}
.engine .e-query-main{min-width:0;flex:1}
.engine .e-q-row{display:flex;align-items:baseline;gap:10px;min-width:0;flex-wrap:wrap}
.engine .e-q-text{font:600 16px/1.35 var(--e-display);letter-spacing:-.01em;color:var(--e-light);overflow-wrap:anywhere;min-width:0}
.engine .e-q-match{font:400 12.5px/1.5 var(--e-mono);color:var(--e-muted);margin-top:3px}
.engine .e-q-match b{color:var(--e-mint);font-weight:600}
.engine .e-q-alts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.engine .q-alt{background:transparent;border:1px solid var(--e-edge);border-radius:3px;color:var(--e-body);font-size:12.5px;font-weight:600;padding:6px 10px;min-height:34px;text-align:left}
.engine .q-alt:hover,.engine .q-alt:focus-visible{border-color:var(--e-mint);color:var(--e-light)}
.engine .e-q-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none}
.engine .e-ctrls{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.engine .e-ctrl{background:transparent;border:1px solid var(--e-edge);color:var(--e-body);font-size:12.5px;font-weight:600;padding:5px 11px;min-height:34px;border-radius:3px;transition:border-color .15s,color .15s}
.engine .e-ctrl:hover{border-color:var(--e-mint);color:var(--e-light)}
.engine .e-badge{display:flex;margin:0}
.engine .e-badge:empty{display:none}
.engine .e-tag{display:inline-flex;align-items:center;gap:7px;min-height:24px;padding:3px 8px;border:1px solid currentColor;border-radius:2px;font:500 12px/1.2 var(--e-mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;background:transparent}
.engine .e-tag::before{content:'';flex:none;width:6px;height:6px;background:currentColor}
.engine .e-tag--example{color:var(--e-brass)}
.engine .e-tag--claude{color:var(--e-mint)}
.engine .e-tag--local{color:var(--e-body)}
.engine .e-tag--sm{min-height:20px;padding:2px 6px;gap:6px;letter-spacing:.04em}
.engine .e-tag--sm::before{width:5px;height:5px}

/* ---------- trace: under the map on one column, beside it (scrolling on its own) on two ---------- */
.engine .e-trace{display:flex;flex-direction:column;border:1px solid var(--e-rule);border-radius:6px;background:var(--e-well);min-width:0}
.engine .e-trace-head{padding:10px 14px;border-bottom:1px solid var(--e-rule);position:relative}
.engine .e-trace-title{font:500 12px/1.2 var(--e-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--e-body)}
.engine .e-trace-tag{margin-top:5px;font-size:12.5px;line-height:1.45;color:var(--e-muted);text-wrap:balance}
.engine .e-trace-bar{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--e-mint);transition:width .7s var(--e-ease)}
.engine .e-trace-body{flex:1;padding:0 0 12px;scrollbar-width:thin;scrollbar-color:#655179 transparent;overscroll-behavior:contain}
.engine .stage{border-bottom:1px solid #352443}
.engine .stage-h{width:100%;display:grid;grid-template-columns:12px auto minmax(0,1fr) 12px;align-items:center;gap:10px;background:none;border:0;color:var(--e-body);padding:8px 14px;min-height:36px;text-align:left;font:500 12px/1.3 var(--e-mono);letter-spacing:.06em;text-transform:uppercase}
.engine .stage[data-s=pending] .stage-h{color:#b2a1c6}
.engine .stage[data-s=pending] .chev{visibility:hidden}
.engine .stage[data-s=pending] .stage-b{display:none}
.engine .tick{width:10px;height:10px;border:1px solid var(--e-edge);border-radius:1px}
.engine .stage[data-s=active] .tick{border-color:var(--e-mint);animation:e-blink 1s steps(2) infinite}
.engine .stage[data-s=done] .tick{background:var(--e-mint);border-color:var(--e-mint)}
.engine .stage-name{white-space:nowrap}
.engine .stage-sum{font-weight:400;letter-spacing:0;text-transform:none;color:var(--e-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right;min-width:0}
.engine .chev{width:12px;height:12px;transition:transform .25s}
.engine .chev path{fill:none;stroke:var(--e-dim);stroke-width:1.5}
.engine .stage[data-open=false] .chev{transform:rotate(-90deg)}
.engine .stage[data-open=false] .stage-b{display:none}
.engine .stage-b{padding:0 14px 12px 36px}
.engine .lines{list-style:none;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.engine .lines>li{min-width:0}
.engine .line{font-size:14px;line-height:1.55;color:var(--e-light);animation:e-line .45s var(--e-ease) both}
.engine .line.instant{animation:none}
.engine .line.mark{position:relative;padding-left:16px}
.engine .line.mark::before{content:'';position:absolute;left:0;top:.6em;width:7px;height:7px;background:var(--e-brass)}
.engine .line.mark.build::before{background:var(--e-mint)}
.engine .line .nm{font-weight:600}
.engine .line .appr{color:var(--e-brass);font-size:13px}
.engine .line .hrs{display:block;font:400 12px/1.5 var(--e-mono);color:var(--e-muted);margin-top:1px}
.engine .line .brief{display:block;font:400 12px/1.5 var(--e-mono);color:var(--e-body);margin-top:3px}
.engine .line[data-auto],.engine .sys-i{transition:color .15s}
.engine .line[data-auto]:hover,.engine .sys-i:hover{color:var(--e-mint-hi)}
.engine .sys{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:2px}
.engine .sys-i{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--e-rule);border-radius:3px;padding:7px 8px;font-size:12.5px;font-weight:600;line-height:1.3;color:var(--e-light);animation:e-line .45s var(--e-ease) both}
.engine .sys-i svg{width:16px;height:16px;flex:none;margin-top:1px}
.engine .sys-i svg path{fill:none;stroke:var(--e-mint);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.engine .sys-i small{display:block;font:400 12px/1.4 var(--e-mono);color:var(--e-muted);margin-top:2px}
.engine .inline-units{display:flex;flex-wrap:wrap;gap:6px}
.engine .inline-units code{font:600 12px/1 var(--e-mono);color:var(--e-mint);border:1px solid rgba(99,215,227,.45);padding:5px 7px;border-radius:2px}
.engine .thinking{display:none;align-items:center;gap:8px;margin-top:8px;font:400 12px/1 var(--e-mono);color:var(--e-muted)}
.engine .stage.think .thinking{display:flex}
.engine .thinking i{width:3px;height:10px;background:var(--e-mint);opacity:.45;animation:e-bar .9s ease-in-out infinite}
.engine .thinking i:nth-child(2){animation-delay:.15s}
.engine .thinking i:nth-child(3){animation-delay:.3s}
.engine .line.done-line{font-size:13.5px;line-height:1.55}
.engine .done-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:2px}
/* A repeat run reads in order (its intro, then its log): the done line and its actions come back when it ends. */
.engine .stage.is-rerun :is(.done-line,.done-actions,.again-wrap){display:none}
.engine .again-k{font:500 12px/1.3 var(--e-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--e-dim);margin:6px 0 8px}
.engine .again-list{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.engine .again-b{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:2px 10px;width:100%;text-align:left;background:transparent;border:1px solid var(--e-edge);border-radius:3px;color:var(--e-body);padding:8px 11px;min-height:44px;font-size:13px;font-weight:600;transition:border-color .15s,color .15s,background .15s}
.engine .again-b small{font:400 12px/1.2 var(--e-mono);color:var(--e-muted);white-space:nowrap}
.engine .again-b:hover,.engine .again-b:focus-visible{border-color:var(--e-mint);color:var(--e-light);background:rgba(99,215,227,.05)}
.engine .again-b[aria-current=true]{border-color:var(--e-mint);color:var(--e-light)}
.engine .again-b[aria-current=true] small{color:var(--e-mint)}
.engine .see-plan{display:inline-flex;gap:10px;align-items:center;background:none;border:0;border-bottom:1px solid var(--e-mint);color:var(--e-mint);font-weight:600;font-size:13px;padding:6px 0;min-height:36px}

/* ---------- map panel ---------- */
.engine .e-panel{--e-mint:#63d7e3;--e-mint-hi:#a3eff6;--e-brass:#ffb16b;position:relative;border:1px solid #5e899a;border-radius:8px;background:var(--e-deep);box-shadow:0 18px 48px #030c1438;scroll-margin-top:calc(var(--e-header) + 8px)}
.engine .e-panel::before{content:'';display:block;height:5px;border-radius:7px 7px 0 0;background:linear-gradient(90deg,#bd9cff 0 25%,#63d7e3 25% 50%,#ffb16b 50% 75%,#ff777f 75%)}
.engine .e-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px 14px;padding:14px 16px;min-height:54px;background:var(--mish-lift);border-bottom:1px solid #416070;flex-wrap:wrap}
.engine .e-panel-l{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;min-width:0}
.engine .e-panel-ctrls{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
.engine .e-panel-title{font:600 17px/1.3 var(--e-display);letter-spacing:-.02em;color:#edf5ff}
.engine .e-status{display:inline-flex;align-items:center;gap:8px;font:400 12px/1.2 var(--e-mono);color:var(--e-body);border:1px solid var(--e-rule);border-radius:2px;padding:5px 8px;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.engine .e-status i{width:6px;height:6px;border-radius:50%;background:var(--e-dim);flex:none}
.engine .e-status[data-k=work] i{background:var(--e-mint);animation:e-pulse 1.2s ease-in-out infinite}
.engine .e-status[data-k=wait] i{background:var(--e-brass);animation:e-pulse .8s ease-in-out infinite}
.engine .e-status[data-k=done] i{background:var(--e-mint)}
.engine .e-status[data-k=idle]{color:var(--e-muted)}
.engine .e-status[data-k=idle] b{color:var(--e-light);font-weight:600}
.engine .e-thought{display:none}
.engine .e-mapwrap{position:relative;padding:4px 6px 0}
.engine .e-map{display:block;width:100%;height:auto;overflow:hidden;transition:opacity .25s}
.engine .e-map.is-swap{opacity:.18}
/* The legend sits in the band under the record row, which the gate tags never use (engine-layout.mjs). */
.engine .e-legend{position:absolute;right:12px;bottom:3px;display:flex;flex-wrap:wrap;gap:2px 14px;padding:2px 8px;border-radius:3px;background:var(--mish-lift);font:400 12px/1.25 var(--e-mono);color:var(--e-muted);pointer-events:none}
.engine .e-legend span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.engine .e-legend svg{width:20px;height:10px}
.engine .lg-auto{stroke:var(--e-mint);stroke-width:1.8;fill:none}
.engine .lg-man{stroke:var(--e-brass);stroke-width:1.5;stroke-dasharray:3 4;fill:none}
.engine .lg-gate{fill:var(--e-deep);stroke:var(--e-brass);stroke-width:1.4}
.engine .e-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px 6px;border-top:1px solid var(--e-rule)}
.engine .e-tabs .e-k{flex-basis:100%;margin-bottom:2px}
.engine .e-tab{background:transparent;border:1px solid var(--e-edge);border-radius:3px;color:var(--e-body);font-size:12.5px;font-weight:600;padding:6px 9px;min-height:36px;text-align:left}
.engine .e-tab[aria-current=true]{border-color:var(--e-mint);color:var(--e-on-mint);background:var(--e-mint)}
.engine[data-mode=running] .e-tab{cursor:default}
/* The tray and the log stay folded until their stage, so the panel never carries empty boxes during the replay. */
.engine .e-fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--e-ease)}
.engine .e-fold>*{min-height:0;overflow:hidden}
.engine.has-tray .e-fold--tray,.engine.has-log .e-fold--log{grid-template-rows:1fr}
/* The chips wrap onto a second row rather than clip: every skill, and who runs it, stays readable at every width. */
.engine .e-tray{display:flex;align-items:flex-start;gap:6px 12px;padding:7px 14px;border-top:1px solid var(--e-rule);min-height:44px}
.engine .e-tray .e-k{white-space:nowrap;flex:none;line-height:30px}
.engine .e-tray-list{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0;min-height:30px;align-items:center;min-width:0}
.engine .e-tray-empty{font:400 12px/1.4 var(--e-mono);color:var(--e-dim)}
.engine .t-unit{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--e-mono);color:var(--e-mint);background:#163841;border:1px solid var(--e-mint);border-radius:3px;padding:6px 8px;min-height:30px;white-space:nowrap;opacity:0;transform:translateY(8px);transition:opacity .4s var(--e-ease),transform .5s var(--e-ease),background .2s,color .2s,border-color .2s}
.engine .t-who{display:inline-flex;align-items:center;gap:5px;padding-left:8px;border-left:1px solid rgba(99,215,227,.35);font-weight:500;color:var(--e-mint)}
.engine .t-who::before{content:'';flex:none;width:5px;height:5px;background:currentColor}
.engine .t-unit.is-local .t-who{color:var(--e-body)}
.engine .t-unit[aria-pressed=true] .t-who{color:inherit;border-color:currentColor}
.engine .t-unit.in{opacity:1;transform:none}
.engine .t-unit.lift{opacity:.25}
.engine .t-unit.docked{background:transparent;border-color:rgba(99,215,227,.5)}
.engine .t-unit:hover,.engine .t-unit:focus-visible{border-color:var(--e-mint)}
.engine .t-unit[aria-pressed=true]{background:var(--e-mint);color:var(--e-on-mint)}
.engine .e-tray-desc{font-size:12.5px;color:var(--e-body);line-height:1.5;padding:0 14px 10px}
.engine .e-tray-desc:empty,.engine[data-mode=running] .e-tray-desc{display:none}
.engine .e-fly{position:absolute;z-index:5;display:flex;align-items:center;justify-content:center;font:600 12px/1 var(--e-mono);color:var(--e-on-mint);background:var(--e-mint);border-radius:3px;pointer-events:none;transform-origin:center;box-shadow:0 0 0 6px rgba(99,215,227,.12),0 12px 24px -10px rgba(0,0,0,.6);will-change:transform}

/* ---------- run log: under the map in the panel on one column, in the trace on two ---------- */
.engine .e-logslot{border-top:1px solid var(--e-rule)}
.engine .log-slot{list-style:none}
.engine .e-log-head{display:flex;justify-content:space-between;align-items:center;gap:6px 10px;padding:4px 0;min-height:34px;flex-wrap:wrap}
.engine .e-log-head h4{font:500 12px/1.2 var(--e-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--e-dim)}
.engine .e-log-tag{font:400 12px/1.3 var(--e-mono);color:var(--e-brass);margin-right:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.engine .e-log-wait{font:400 12px/1.3 var(--e-mono);color:var(--e-dim)}
.engine .e-log.is-open .e-log-wait{display:none}
.engine .e-log-list{list-style:none;margin:0;padding:0}
/* The "who" column wraps (at a space or a skill's hyphen) instead of cutting a tool name short. */
.engine .e-log-list li{display:grid;grid-template-columns:112px minmax(0,1fr);gap:10px;padding:3px 0;border-top:1px dashed #352443;font:400 12px/1.45 var(--e-mono);color:var(--e-body);animation:e-line .4s var(--e-ease) both}
.engine .e-logslot .e-log-list li{grid-template-columns:150px minmax(0,1fr)}
.engine .e-log-list li:first-child{border-top:0}
.engine .e-log-list .who{color:var(--e-muted);overflow-wrap:anywhere}
.engine .e-log-list .k-skill .who{color:var(--e-mint)}
.engine .e-log-list .k-gate .who,.engine .e-log-list .k-gate .msg{color:var(--e-brass)}
.engine .e-log-list .k-gate.ok .msg{color:var(--e-body)}
.engine .e-log-list .k-done,.engine .e-log-list .k-done .who{color:var(--e-mint)}
.engine .e-step{background:var(--e-mint);color:var(--e-on-mint);border:0;border-radius:3px;font-weight:600;font-size:12.5px;padding:6px 12px;min-height:34px}
.engine .e-step.is-approve{background:var(--e-brass);color:var(--e-on-mint)}
.engine .e-walk{background:transparent;border:1px solid var(--e-edge);color:var(--e-body);border-radius:3px;font-weight:600;font-size:12.5px;padding:5px 11px;min-height:34px}
.engine .e-walk:hover{border-color:var(--e-mint);color:var(--e-light)}
.engine .e-logslot .e-log{padding:4px 14px 8px}
.engine .stage .e-log{margin-top:2px}

/* ---------- SVG map (sizes are viewBox units; the wide map is drawn at 0.786 scale or more) ---------- */
.engine .m-dot{fill:#2d4553}
.engine .m-label{fill:var(--e-dim);font:500 14px var(--e-mono);letter-spacing:.12em}
.engine .is-tall .m-label{font-size:13px}
.engine .m-lane{stroke:#413054;stroke-dasharray:2 5;fill:none}
.engine .m-reg{stroke:#655179;fill:none}
.engine .node{--n-accent:#63d7e3;--n-fill:#142f45;transition:opacity .3s}
.engine .node[data-row=record]{--n-accent:#bd9cff;--n-fill:#302646}
.engine .n-in{opacity:0;transform:translateY(10px);transition:opacity .55s var(--e-ease),transform .7s var(--e-ease)}
.engine .is-tall .n-in{transform:translateX(-8px)}
.engine .node.on .n-in{opacity:1;transform:none}
/* On phones a tool the current automation does not use is dimmed, once it has been revealed. */
.engine .is-tall .node.on.dimn .n-in{opacity:.5}
.engine .n-box{fill:var(--n-fill);stroke:var(--n-accent);stroke-width:1.3}
.engine .n-label{fill:var(--e-light);font:600 16px var(--e-display);letter-spacing:-.01em}
.engine .is-tall .n-label{font-size:13.5px}
.engine .n-sub{fill:var(--e-muted);font:400 14px var(--e-mono)}
.engine .n-icon{fill:none;stroke:var(--n-accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.engine .n-ring{fill:none;stroke:var(--e-brass);stroke-width:1.4;stroke-dasharray:4 4;opacity:0;transition:opacity .4s}
.engine .node.leak .n-ring{opacity:1;animation:e-dash 1.6s linear infinite}
.engine .node.hot .n-box{stroke:#e5fff5;stroke-width:2;fill:var(--n-fill)}
.engine .node.flash .n-box{animation:e-flash .9s var(--e-ease)}
.engine .is-ghost .node.on .n-in{opacity:1;transform:none}
.engine .is-ghost .n-box{fill:var(--n-fill);stroke:var(--n-accent);stroke-dasharray:4 4}
.engine .is-ghost .n-label{fill:var(--e-light)}
.engine .is-ghost .n-icon{stroke:var(--n-accent)}
.engine .ghost-link{fill:none;stroke:#63d7e3;stroke-width:2;stroke-dasharray:3 6;opacity:.75;animation:e-dash 3s linear infinite}
.engine .ghost-sock{fill:#163841;stroke:#63d7e3;stroke-width:1.3;stroke-dasharray:3 3}
.engine .seg,.engine .sock-g,.engine .unit,.engine .gate{transition:opacity .3s}
.engine .seg-man{fill:none;stroke:var(--e-brass);stroke-width:1.6;stroke-dasharray:3 6;opacity:0;transition:opacity .45s}
.engine .seg.leak .seg-man{opacity:.95;animation:e-dash 1.2s linear infinite}
.engine .seg.built .seg-man{opacity:0;animation:none}
.engine .seg-auto{fill:none;stroke:var(--e-mint);stroke-width:2;stroke-linecap:round;opacity:0}
.engine .seg.drawing .seg-auto,.engine .seg.built .seg-auto{opacity:.92}
.engine .seg-arrow{fill:var(--e-mint);opacity:0;transition:opacity .3s}
.engine .seg.built .seg-arrow{opacity:.92}
.engine .hand{opacity:0;transition:opacity .4s}
.engine .seg.leak .hand{opacity:1}
.engine .seg.built .hand{opacity:0}
.engine .hand rect{fill:var(--e-brass-well);stroke:var(--e-brass);stroke-width:.9}
.engine .hand text{fill:var(--e-brass);font:500 14px var(--e-mono)}
.engine .is-tall .hand text{font-size:13px}
.engine .socket{fill:rgba(99,215,227,.04);stroke:var(--e-mint);stroke-opacity:.55;stroke-dasharray:3 3;opacity:0;transition:opacity .4s}
.engine .sock-g.shown .socket{opacity:1}
.engine .unit{opacity:0;pointer-events:none}
.engine .unit.on{opacity:1}
.engine .u-in{transform-box:fill-box;transform-origin:center}
.engine .unit.snap .u-in{animation:e-snap .55s var(--e-ease)}
.engine .u-box{fill:#163841;stroke:var(--e-mint);stroke-width:1.3}
.engine .u-text{fill:var(--e-mint);font:600 14px var(--e-mono)}
.engine .is-tall .u-text{font-size:13px}
.engine .u-loc{fill:var(--e-body)}
.engine .u-loc-t{fill:var(--e-deep);font:700 14px var(--e-mono);letter-spacing:.04em}
.engine .is-tall .u-loc-t{font-size:13px}
.engine .u-ring{fill:none;stroke:var(--e-mint);stroke-width:1;opacity:0;transform-box:fill-box;transform-origin:center}
.engine .unit.snap .u-ring{animation:e-ring .7s var(--e-ease)}
.engine .unit.busy .u-box{fill:var(--e-mint)}
.engine .unit.busy .u-text{fill:var(--e-on-mint)}
.engine .gate{opacity:0}
.engine .gate.shown{opacity:1}
.engine .g-d{fill:var(--e-deep);stroke:var(--e-brass);stroke-width:1.6;transition:fill .3s,stroke .3s}
.engine .gate.wait .g-d{fill:var(--e-brass)}
.engine .gate.ok .g-d{fill:var(--e-mint);stroke:var(--e-mint)}
.engine .g-tag{opacity:0;transition:opacity .3s}
.engine .gate.wait .g-tag,.engine .gate.ok .g-tag{opacity:1}
.engine .g-tag rect{fill:var(--e-brass-well);stroke:var(--e-brass);stroke-width:.9}
.engine .g-lead{fill:none;stroke:var(--e-brass);stroke-width:1.2;opacity:.85}
.engine .gate.ok .g-tag rect{fill:#163841;stroke:var(--e-mint)}
.engine .gate.ok .g-lead{stroke:var(--e-mint)}
.engine .g-tag text{fill:var(--e-brass);font:500 14px var(--e-mono)}
.engine .is-tall .g-tag text{font-size:13px}
.engine .gate.ok .g-tag text{fill:var(--e-mint)}
.engine .is-tall .off{opacity:0!important;pointer-events:none}
.engine .m-flow{fill:var(--e-mint-hi)}
.engine .tok-core{fill:#fff}
.engine .tok-halo{fill:var(--e-mint);opacity:.25}
.engine .tok-tail{fill:none;stroke:var(--e-mint);stroke-width:3;stroke-linecap:round;opacity:.6}
.engine .tok{transition:opacity .3s}
/* The scan is a thin line, not a slab. */
.engine .m-scan{opacity:0;transition:opacity .5s}
.engine .m-scan-line{fill:var(--e-mint);opacity:.6}
.engine .m-scan-glow{fill:var(--e-mint);opacity:.08}
.engine .is-scanning .m-scan{opacity:1;animation:e-scan-x 2.6s cubic-bezier(.45,0,.55,1) infinite}
.engine .is-ghost .m-scan{opacity:.55;animation:e-scan-x 7s cubic-bezier(.45,0,.55,1) infinite}
.engine .is-tall.is-ghost .m-scan,.engine .is-tall.is-scanning .m-scan{animation-name:e-scan-y}
.engine .is-focus .seg,.engine .is-focus .unit.on,.engine .is-focus .node.on,.engine .is-focus .gate{transition:opacity .25s}
.engine .is-focus .seg:not(.hl){opacity:.16}
.engine .is-focus .unit.on:not(.hl) .u-box{fill:#211632;stroke-opacity:.28}
.engine .is-focus .unit.on:not(.hl) .u-text{fill-opacity:.3}
.engine .is-focus .unit.on:not(.hl) .u-loc,.engine .is-focus .unit.on:not(.hl) .u-loc-t{opacity:.35}
.engine .is-focus .node:not(.hl){opacity:.4}
.engine .seg.hl .seg-auto{stroke-width:3;opacity:1}

/* ---------- plan (paper) ---------- */
.engine .e-plan{max-width:1400px;margin:clamp(40px,5vw,72px) auto 0;background:var(--mish-lift);color:var(--e-ink);border-radius:6px;padding:clamp(28px,4vw,56px) clamp(20px,4vw,56px);display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,72px);scroll-margin-top:calc(var(--e-header) + 16px);color-scheme:dark}
.engine .e-plan :focus-visible{outline-color:var(--e-focus-paper);box-shadow:0 0 0 2px var(--e-paper)}
.engine .e-plan .e-k{color:var(--e-ink-muted);margin-bottom:12px}
/* The side and the automation list share their own grid, so on two columns the sticky side stops at the end of the
   list and never travels down over the skills below. */
.engine .e-plan-main{display:grid;grid-template-columns:minmax(0,1fr);gap:inherit}
.engine .e-plan-side{align-self:start}
.engine .e-plan-title{font:600 clamp(1.5rem,1.2rem + 1.2vw,2.375rem)/1.1 var(--e-display);letter-spacing:-.035em;margin-bottom:14px;text-wrap:balance;color:var(--e-ink)}
.engine .e-plan-title .e-plan-for{display:block;color:var(--e-teal)}
.engine .e-plan-ex{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font:400 12.5px/1.5 var(--e-mono);color:var(--e-ink);margin-bottom:14px}
/* Tags on paper: brass and body would be too faint as text, so the words are ink (teal for Claude) and brass stays on
   the border and the marker. */
.engine .e-plan .e-tag{color:var(--e-ink)}
.engine .e-plan .e-tag--example{border-color:var(--e-brass)}
.engine .e-plan .e-tag--example::before{background:var(--e-brass)}
.engine .e-plan .e-tag--claude{color:var(--e-teal)}
.engine .e-plan .e-tag--local{color:var(--e-ink)}
.engine .e-plan-sum{font-size:15px;line-height:1.7;color:var(--e-ink-muted);max-width:42ch}
.engine .e-plan-hours{margin-top:20px;padding-top:14px;border-top:1px solid var(--e-ink);font-size:14px;line-height:1.6;color:var(--e-ink)}
.engine .e-plan-honest{margin-top:16px;font-size:13px;line-height:1.6;color:var(--e-ink);padding:11px 14px;border-left:2px solid var(--e-brass);background:rgba(36,19,54,.5)}
.engine .e-plan-list{list-style:none;padding:0}
.engine .auto-row{border-top:1px solid var(--e-ink);padding:22px 0 26px}
.engine .auto-row:last-child{border-bottom:1px solid var(--e-paper-rule)}
.engine .row-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.engine .row-head h4{font:600 clamp(1.25rem,1.11rem + .57vw,1.5rem)/1.2 var(--e-display);letter-spacing:-.025em}
.engine .hours{font:600 12.5px/1.3 var(--e-mono);color:var(--e-teal);white-space:nowrap}
.engine .hours em{font-style:normal;font-weight:400;color:var(--e-ink-muted);border:1px solid var(--e-paper-rule);padding:2px 6px;border-radius:2px;margin-left:8px}
.engine .fixes{font-size:14px;color:var(--e-ink-muted);margin:8px 0 16px;line-height:1.55}
.engine .fixes b{color:var(--e-ink);font-weight:600}
.engine .spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--e-paper-rule)}
.engine .spec>div{padding:13px 16px 0 0}
.engine .spec>div+div{padding-left:16px;border-left:1px solid var(--e-paper-rule)}
.engine .spec>div:nth-child(3){padding-left:0;border-left:0}
.engine .spec dt{font:500 12px/1.3 var(--e-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--e-ink-muted);margin-bottom:6px}
.engine .spec dd{font-size:14.5px;line-height:1.55}
.engine .spec .appr dt{display:flex;align-items:center;gap:7px;color:var(--e-ink)}
.engine .spec .appr dt::before{content:'';flex:none;width:7px;height:7px;background:var(--e-brass);transform:rotate(45deg)}
.engine .row-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap}
.engine .uses{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--e-ink-muted)}
.engine .uses code,.engine .e-skill-list code{font:600 12px/1 var(--e-mono);background:var(--e-sage);color:var(--e-ink);padding:5px 7px;border-radius:2px}
.engine .run-btn{display:inline-flex;align-items:center;gap:12px;background:none;border:0;border-bottom:1px solid var(--e-ink);color:var(--e-ink);font-weight:600;font-size:13.5px;padding:8px 0;min-height:44px}
.engine .run-btn:hover{color:var(--e-teal);border-color:var(--e-teal)}
.engine .e-skills{border-top:1px solid var(--e-ink);padding-top:20px}
.engine .e-skills h4{font:600 1.25rem/1.25 var(--e-display);letter-spacing:-.025em;margin-bottom:6px}
.engine .e-skills>p{font-size:14.5px;color:var(--e-ink-muted);max-width:72ch;line-height:1.65}
.engine .e-skill-list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0 28px;margin-top:16px}
.engine .e-skill-list li{border-top:1px solid var(--e-paper-rule);padding:13px 0 15px}
.engine .sk-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.engine .e-skill-list p{font-size:14px;line-height:1.55;margin-top:7px}
.engine .e-skill-list small{display:block;font:400 12px/1.5 var(--e-mono);color:var(--e-ink-muted);margin-top:6px}

/* ---------- the real version and the calls to action ---------- */
.engine .e-real{max-width:1400px;margin:clamp(48px,6vw,88px) auto 0;border-top:1px solid var(--e-rule);padding-top:clamp(28px,3vw,40px)}
.engine .e-real .e-k{margin-bottom:12px}
.engine .e-real h3{font:600 clamp(1.5rem,1.2rem + 1.2vw,2.375rem)/1.1 var(--e-display);letter-spacing:-.035em;color:var(--e-light);max-width:20ch;text-wrap:balance}
.engine .e-verification{margin:32px 0 0;padding:26px 0;border-top:1px solid var(--e-rule);border-bottom:1px solid var(--e-rule)}
.engine .e-verification h4{font:600 25px/1.25 var(--e-display);letter-spacing:-.02em;color:var(--e-light);margin:0 0 12px}
.engine .e-verification p{font-size:15px;line-height:1.7;color:var(--e-body);max-width:82ch}
.engine .e-check-flow{list-style:none;padding:0;margin:24px 0;display:flex;flex-wrap:wrap;gap:12px 32px;color:var(--e-mint);font-size:14px}
.engine .e-check-flow li{position:relative;padding-right:12px}
.engine .e-check-flow li:not(:last-child)::after{content:"";position:absolute;right:-12px;top:7px;width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.engine .e-check-outcomes{list-style:none;padding:0;margin:22px 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.engine .e-check-outcomes li{border-top:1px solid var(--e-edge);padding:14px 0}
.engine .e-check-outcomes b{display:block;font-size:20px;font-weight:600;color:#63d7e3;margin-bottom:7px}
.engine .e-check-outcomes li:nth-child(2) b{color:#ff9a9f}.engine .e-check-outcomes li:nth-child(3) b{color:#ffb16b}
.engine .e-check-outcomes span{font-size:13px;line-height:1.6;color:var(--e-body);display:block}
.engine .e-verification .e-verification-note{font-size:12px;color:var(--e-muted);margin-top:14px}
@media(max-width:600px){.engine .e-check-outcomes{grid-template-columns:1fr;gap:0}.engine .e-check-flow{display:grid;gap:12px}.engine .e-check-flow li:not(:last-child)::after{display:none}.engine .e-verification h4{font-size:23px}}
.engine .e-real-lede{color:var(--e-body);font-size:clamp(.9375rem,.8911rem + .1905vw,1.0625rem);line-height:1.7;max-width:64ch;margin-top:16px}
.engine .e-steps{list-style:none;padding:0;display:grid;grid-template-columns:minmax(0,1fr);margin-top:32px;border-top:1px solid var(--e-edge)}
.engine .e-steps li{padding:16px 0;border-bottom:1px solid var(--e-rule)}
/* The calls to action open with their own rule, so the last step ends without one or its bottom padding: one rule and
   one 24px gap (40px once the steps sit in three columns), never an empty band above Send. */
.engine .e-steps li:last-child{border-bottom:0;padding-bottom:0}
.engine .e-steps h4{font:600 1.1875rem/1.25 var(--e-display);letter-spacing:-.02em;color:var(--e-light);margin-bottom:8px}
.engine .e-steps p{font-size:14.5px;line-height:1.65;color:var(--e-body)}
.engine .e-cta{display:flex;flex-wrap:wrap;align-items:flex-start;gap:18px 28px;margin-top:24px;padding-top:28px;border-top:1px solid var(--e-rule)}
.engine .e-send{display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:44ch}
.engine .e-send-help{font-size:13px;line-height:1.55;color:var(--e-muted)}
.engine .e-btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:48px;padding:0 20px;border:1px solid transparent;border-radius:3px;font:600 14px/1.2 var(--e-sans);text-decoration:none;white-space:nowrap;transition:background .18s,border-color .18s}
.engine .e-btn--sm{min-height:44px;padding:0 16px;gap:10px;font-size:13.5px}
.engine .e-btn--signal{background:var(--e-mint);color:var(--e-on-mint)}
.engine .e-btn--signal:hover{background:var(--e-mint-hi)}
.engine .e-btn--quiet{background:transparent;color:var(--e-light);border-color:var(--e-edge)}
.engine .e-btn--quiet:hover{border-color:var(--e-mint)}
.engine .e-contact{flex-basis:100%;font:400 12.5px/1.7 var(--e-mono);color:var(--e-muted)}
.engine .e-contact a{text-decoration:underline;text-decoration-color:var(--e-edge);text-underline-offset:4px}
.engine .e-built{flex-basis:100%;margin-top:-10px;font:400 12.5px/1.7 var(--e-mono);color:var(--e-muted)}

/* ---------- motion ---------- */
@keyframes e-line{from{opacity:0;transform:translateY(4px)}}
@keyframes e-bar{50%{opacity:1;transform:scaleY(1.5)}}
@keyframes e-blink{50%{background:var(--e-mint)}}
@keyframes e-pulse{50%{opacity:.35}}
@keyframes e-dash{to{stroke-dashoffset:-16}}
@keyframes e-flash{0%{fill:#493562}100%{fill:#241838}}
@keyframes e-snap{0%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes e-ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}
@keyframes e-scan-x{from{transform:translateX(40px)}to{transform:translateX(840px)}}
@keyframes e-scan-y{from{transform:translateY(44px)}to{transform:translateY(452px)}}
/* Pause motion (site-wide), the host's pause() and off screen: looping motion holds still. Entry animations and one-shot
   effects are skipped while held, so a replay finished while paused never leaves a row on an invisible first frame.
   Reduced motion: no animation at all. */
:root[data-motion="paused"] .engine *,.engine.is-held *,.engine:not(.is-onscreen) *{animation-play-state:paused!important}
:root[data-motion="paused"] .engine :is(.line,.sys-i,.e-log-list li,.u-in,.u-ring,.n-box),.engine.is-held :is(.line,.sys-i,.e-log-list li,.u-in,.u-ring,.n-box){animation:none!important}
:root[data-motion="paused"] .engine *,:root[data-motion="paused"] .engine *::before,:root[data-motion="paused"] .engine *::after,.engine.is-held *,.engine.is-held *::before,.engine.is-held *::after{transition-duration:0s!important;transition-delay:0s!important}
.engine.is-reduced *,.engine.is-reduced *::before,.engine.is-reduced *::after{animation:none!important;transition-duration:0s!important;transition-delay:0s!important}
@media (prefers-reduced-motion:reduce){
  .engine *,.engine *::before,.engine *::after{animation:none!important;transition-duration:0s!important;transition-delay:0s!important}
}

/* ---------- one column (the base above): the map sits under the question, the trace under the map ---------- */
.engine .e-trace-body{overflow:visible}
.engine.is-running .e-thought{display:block;padding:9px 14px 0;font-size:13.5px;line-height:1.5;color:var(--e-body);min-height:50px}
.engine.has-log .e-thought{display:none}
.engine .e-thought b{display:block;font:500 12px/1.4 var(--e-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--e-mint);margin-bottom:2px}
/* While a run plays, the map, the tray and the run log (its receipt included) fit one screen under the header, as long
   as that leaves the map at 0.786 scale (348px tall) or more: on a short screen the text stays legible and the page
   moves up to the receipt when the run ends. */
.engine.is-running .e-map{max-height:max(348px,calc(100svh - var(--e-header) - 334px))}

/* ---------- two columns from 1006px of content width ---------- */
@container engine (min-width:1006px){
  .engine .e-grid{--e-cols:2;grid-template-columns:minmax(280px,296px) minmax(706px,1fr);grid-template-areas:"ask map";gap:0 20px}
  .engine.is-running .e-grid{grid-template-columns:minmax(280px,300px) minmax(706px,1fr);grid-template-areas:"q q" "trace map";gap:12px 20px;align-items:stretch}
  .engine .e-ask{max-width:none}
  .engine .e-trace{contain:size;min-height:300px}
  .engine .e-trace-body{overflow:auto}
  .engine.is-running .e-thought{display:none}
  .engine.is-running .e-map{max-height:none}
  .engine .e-logslot{display:none}
  .engine .e-plan-main{grid-template-columns:minmax(240px,.78fr) minmax(0,1.7fr)}
  .engine .e-plan-side{position:sticky;top:calc(var(--e-header) + 24px)}
  .engine .spec{grid-template-columns:repeat(4,minmax(0,1fr))}
  .engine .spec>div:nth-child(3){padding-left:16px;border-left:1px solid var(--e-paper-rule)}
}
@container engine (min-width:1170px){
  .engine .e-grid{grid-template-columns:minmax(300px,360px) minmax(0,1fr);gap:0 40px}
  .engine.is-running .e-grid{grid-template-columns:340px minmax(0,1fr);gap:12px 28px}
}
/* From about a 1410px window the trace widens, so the run log reads in short lines. */
@container engine (min-width:1300px){
  .engine .e-grid{grid-template-columns:minmax(320px,420px) minmax(0,1fr);gap:0 48px}
  .engine.is-running .e-grid{grid-template-columns:420px minmax(0,1fr);gap:12px 28px}
  .engine .e-log-list li{grid-template-columns:128px minmax(0,1fr)}
}
@container engine (min-width:880px){
  .engine .e-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .engine .e-steps li{padding:18px 24px 0 0;border-bottom:0}
  .engine .e-steps li+li{padding-left:24px;border-left:1px solid var(--e-rule)}
  .engine .e-cta{margin-top:40px}
}

/* ---------- phones: the tall map, one automation at a time ---------- */
@media (max-width:640px){
  .engine .e-chip{gap:8px;padding:8px 9px;min-height:58px}
  .engine .e-chip svg{width:16px;height:16px}
  .engine .e-chip b{font-size:13px}
  .engine .e-query{flex-direction:column}
  .engine .e-q-side{align-items:flex-start;width:100%}
  .engine .e-ctrls{justify-content:flex-start}
  .engine .e-panel-head{padding:8px 12px}
  .engine .e-legend{position:static;justify-content:flex-start;background:none;padding:6px 10px 10px;gap:4px 10px;font-size:11.5px}
  .engine .e-legend span{gap:5px}
  .engine .e-legend svg{width:16px}
  .engine .e-tray{flex-wrap:wrap}
  .engine .e-tray-list{flex-wrap:wrap;overflow:visible}
  .engine .e-log-list li,.engine .e-logslot .e-log-list li{grid-template-columns:minmax(0,1fr);gap:0}
  .engine.is-running .e-map{max-height:none}
  .engine .spec{grid-template-columns:minmax(0,1fr)}
  .engine .spec>div,.engine .spec>div+div,.engine .spec>div:nth-child(3){padding:12px 0 0;border-left:0}
  .engine .spec>div+div{border-top:1px dashed var(--e-paper-rule);margin-top:12px}
  .engine .e-plan{padding:24px 16px;margin-left:calc(var(--e-gutter) * -.5);margin-right:calc(var(--e-gutter) * -.5)}
}

/* ---------- After the close: terms and questions (#terms) ----------
   What the old coda carried (process, terms, fit, risk, FAQ), compressed into three terms and a list of questions in
   native <details>, so every answer opens by keyboard and is read without script. The same dark stage as the engine
   above it, from the identity tokens with fallbacks. */
.close-terms{
  --ct-deep:var(--mish-deep,#180f28);--ct-rule:var(--mish-rule,#58466d);--ct-edge:var(--mish-edge,#9883af);
  --ct-light:var(--mish-light,#fbf7ff);--ct-body:var(--mish-body,#ded7ea);--ct-muted:var(--mish-muted,#c1b4d0);--ct-mint:var(--mish-mint,#63d7e3);
  --ct-focus:var(--mish-amber,#ffb16b);--ct-ease:var(--mish-ease,cubic-bezier(.16,1,.3,1));
  --ct-sans:var(--mish-font-body,Montserrat,'Avenir Next','Segoe UI',system-ui,sans-serif);
  --ct-mono:var(--mish-font-mono,'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);
  box-sizing:border-box;padding:clamp(40px,6vw,80px) var(--mish-gutter,clamp(16px,4vw,56px)) clamp(48px,7vw,96px);
  background:var(--ct-deep);border-top:1px solid var(--ct-rule);color:var(--ct-body);
  font:400 16px/1.6 var(--ct-sans);font-synthesis:none;-webkit-font-smoothing:antialiased;color-scheme:dark;scroll-margin-top:var(--mish-header-h,64px)
}
.close-terms *,.close-terms *::before,.close-terms *::after{box-sizing:border-box}
.close-terms :where(h2,h3,p,ul){margin:0;max-width:none}
.close-terms ul{padding:0;list-style:none}
.close-terms :focus-visible{outline:3px solid var(--ct-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--ct-deep)}
.close-terms [tabindex="-1"]:focus:not(:focus-visible){outline:none}
.close-terms .ct-in{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,5vw,72px)}
@media (min-width:1000px){.close-terms .ct-in{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.close-terms :is(.ct-terms,.ct-faq){scroll-margin-top:var(--mish-header-h,64px)}
.close-terms .ct-kicker{display:flex;align-items:center;gap:10px;margin-bottom:14px;font:500 12px/1.4 var(--ct-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ct-muted)}
.close-terms .ct-kicker::before{content:'';flex:none;width:18px;height:9px;background:linear-gradient(90deg,var(--ct-muted) 0 50%,#ffb03f 56%,#ff7f3a 75%,#ff3f86 90%,#f2167c);-webkit-mask:url(assets/brand/mn-glyph.svg) center/contain no-repeat;mask:url(assets/brand/mn-glyph.svg) center/contain no-repeat}
.close-terms .ct-h{font:600 clamp(1.5rem,1.2rem + 1.2vw,2.25rem)/1.15 var(--ct-sans);letter-spacing:-.03em;color:var(--ct-light);text-wrap:balance}
.close-terms .ct-list,.close-terms .ct-qs{margin-top:24px;border-top:1px solid var(--ct-rule)}
.close-terms .ct-list li{padding:18px 0;border-bottom:1px solid var(--ct-rule)}
.close-terms .ct-list h3{font:600 1.0625rem/1.35 var(--ct-sans);color:var(--ct-light)}
.close-terms :is(.ct-list p,details p){max-width:62ch;font-size:clamp(.9375rem,.8911rem + .1905vw,1.0625rem);line-height:1.65}
.close-terms .ct-list p{margin-top:6px}
.close-terms details{border-bottom:1px solid var(--ct-rule)}
.close-terms summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 0;cursor:pointer;list-style:none;font:600 1rem/1.4 var(--ct-sans);color:var(--ct-light)}
.close-terms summary::-webkit-details-marker{display:none}
.close-terms summary::after{content:'';flex:none;width:9px;height:9px;margin:0 6px;border-right:1.6px solid var(--ct-mint);border-bottom:1.6px solid var(--ct-mint);transform:translateY(-3px) rotate(45deg);transition:transform .25s var(--ct-ease)}
.close-terms details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.close-terms summary:hover{color:var(--ct-mint)}
.close-terms details p{padding:0 0 18px}
.close-terms .ct-link{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin-top:20px;color:var(--ct-light);font:600 14px/1.2 var(--ct-sans);text-decoration:underline;text-decoration-color:var(--ct-edge);text-decoration-thickness:1px;text-underline-offset:6px}
.close-terms .ct-link:hover{text-decoration-color:var(--ct-mint)}
.close-terms .ct-link svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6}
:root[data-motion="paused"] .close-terms summary::after{transition:none}
@media (prefers-reduced-motion:reduce){.close-terms summary::after{transition:none}}
@media (forced-colors:active){.close-terms summary::after{border-color:CanvasText}}