/* Copyright (c) 2026 Macleod Labs FZ-LLC. Proprietary and confidential. */
/* Shared page styles: tokens, base type, header, run bar, diagram, inspector, waterfall. Linked by engine.html and composer.html.
   Lifted verbatim from engine.html (Task 4); rule order is kept, so the cascade is unchanged. Engine-only styles stay in engine.html. */
:root{
  --ground:#F5F6F8; --paper:#FFFFFF; --ink:#0D0F12; --muted:#5A616E; --rule:#E1E4EA;
  --amber:#C98A0E; --live:#8C5F05; --live-soft:#FBF1DC;
  --ctrl:#0D0F12; --on-ctrl:#FFFFFF; --ok:#17944F; --fuel:rgba(201,138,14,.24);
  --grid:rgba(13,15,18,.045);
  --shadow:0 1px 2px rgba(13,15,18,.06), 0 18px 36px -24px rgba(13,15,18,.32);
  --display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --gut:clamp(20px,5vw,56px);
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0A0B0D; --paper:#131519; --ink:#ECEEF2; --muted:#8E95A3; --rule:#24272E;
    --amber:#F2B23A; --live:#F2B23A; --live-soft:#2A2210;
    --ctrl:#ECEEF2; --on-ctrl:#0A0B0D; --ok:#3DDC84; --fuel:rgba(242,178,58,.24);
    --grid:rgba(236,238,242,.04);
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 18px 36px -22px rgba(0,0,0,.85);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#0A0B0D; --paper:#131519; --ink:#ECEEF2; --muted:#8E95A3; --rule:#24272E;
  --amber:#F2B23A; --live:#F2B23A; --live-soft:#2A2210;
  --ctrl:#ECEEF2; --on-ctrl:#0A0B0D; --ok:#3DDC84; --fuel:rgba(242,178,58,.24);
  --grid:rgba(236,238,242,.04);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 18px 36px -22px rgba(0,0,0,.85);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
html,body{margin:0}
body{background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background-color .25s,color .25s}
a{color:var(--ink);text-decoration-color:var(--amber);text-decoration-thickness:2px;text-underline-offset:4px}
a:hover{color:var(--live)}
button{font:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--gut)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}

/* header */
.top{display:flex;justify-content:space-between;align-items:center;gap:12px 16px;flex-wrap:wrap;padding:20px 0}
.who{font-size:15px;line-height:1.3}
.who b{font-weight:600}
.who span{color:var(--muted)}
.who b{font-family:var(--display);font-weight:700;letter-spacing:-.01em}
.who .brand-home{display:block;font-size:22px;line-height:1.15;color:var(--live)}   /* the accent token: 5:1 on the light ground, 11:1 on the dark */
.who .brand-home a{color:inherit;text-decoration:none}
.who .brand-home a:hover{text-decoration:underline;text-decoration-thickness:1px}
.who .by{display:block;font-size:12px;white-space:nowrap}
.who .by a{color:var(--muted);text-decoration-thickness:1px}
.who .by a:hover{color:var(--ink)}
/* preferences (js/prefs.js): an angled tab hanging off the header's bottom edge, the dropdown opening over the page */
.prefs{position:relative;display:flex;flex-wrap:wrap;justify-content:flex-end;margin:-6px 0 0;z-index:30}
.prefs-tab{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:8px;max-width:100%;min-height:32px;padding:0 18px 2px;border:0;background:transparent;color:var(--ink);font:500 12.5px var(--mono);cursor:pointer}
.prefs-tab::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper);border:1px solid var(--rule);border-top:0;border-radius:0 0 7px 7px;transform:perspective(60px) rotateX(-6deg);transform-origin:top}
.prefs-tab:hover::before,.prefs.open .prefs-tab::before{border-color:var(--amber)}
.prefs-v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prefs-caret{width:7px;height:7px;flex:none;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.prefs.open .prefs-caret{transform:translateY(1px) rotate(225deg)}
.prefs-panel{position:absolute;top:100%;right:0;margin-top:6px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;width:min(420px,calc(100vw - 2 * var(--gut)));padding:14px;border:1px solid var(--ink);border-radius:8px;background:var(--paper);box-shadow:var(--shadow)}
.prefs-panel[hidden]{display:none}
.prefs-f{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--muted);min-width:0}
.prefs-f select{min-height:40px;font:inherit;font-size:14px;color:var(--ink);background:var(--ground);border:1px solid var(--rule);border-radius:6px;padding:0 8px;min-width:0}
.prefs-done{grid-column:1 / -1;justify-self:end;min-height:40px;padding:0 16px;border-radius:6px;border:1px solid var(--ink);background:transparent;color:var(--ink);font-weight:600;font-size:14px;cursor:pointer}
.prefs-warn{flex:1 0 100%;margin:4px 0 0;text-align:right;font-size:13px;color:var(--live)}
.prefs-warn[hidden]{display:none}
.embed .prefs{display:none}
.tools{display:flex;gap:10px;align-items:center}
.btn{font-weight:600;font-size:15px;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:6px;text-decoration:none;border:1px solid var(--ink);color:var(--ink);background:transparent;cursor:pointer;white-space:nowrap}
.btn.solid{background:var(--amber);border-color:var(--amber);color:#0D0F12}
.btn:hover{background:var(--paper);color:var(--ink)}
.btn.solid:hover{filter:brightness(1.06);background:var(--amber);color:#0D0F12}
.themebtn{width:44px;height:44px;border-radius:6px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}
.themebtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.themebtn .i-sun{display:none}
:root[data-theme="dark"] .themebtn .i-sun{display:block}
:root[data-theme="dark"] .themebtn .i-moon{display:none}
/* page tabs in the compact header (the engine at /, the composer, later pages): each page its own URL */
.ptabs{display:flex;gap:2px;margin-right:auto;margin-left:clamp(0px,2vw,20px);font-size:14px}
/* A slim header (config/pages.yaml header.slim): no tabs or preferences, the tools at the right. */
.ptabs[hidden],.prefs[hidden]{display:none}
.ptabs[hidden] ~ .tools{margin-left:auto}
.ptabs a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:6px;text-decoration:none;color:var(--muted);font-weight:500}
.ptabs a:hover{color:var(--ink);background:var(--paper)}
.ptabs a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink);border-radius:6px 6px 0 0}
/* tabs from config/pages.yaml (js/site-tabs.js). One row that never widens the header: the nav scrolls inside itself.
   A coming tab is not a link; its chip sits over the label's corner, so it adds no width. */
.ptabs{min-width:0;flex-wrap:nowrap}
.ptabs a,.ptabs .soon{flex:none;white-space:nowrap;padding:0 10px}
.ptabs .soon{position:relative;display:inline-flex;align-items:center;min-height:44px;color:var(--muted);font-weight:500;cursor:default}
.ptabs .tab-chip{position:absolute;top:0;right:0;font:500 9.5px/1.3 var(--mono);font-style:normal;color:var(--live);background:var(--live-soft);border-radius:3px;padding:0 3px}
/* Below the widest header (.wrap's 1120px) the tabs may not fit beside the name and tools: the nav takes the space left
   (flex-basis 0, so it never wraps the header) and scrolls inside itself. Above that it is a plain row: a scroll
   container there is not needed. From 1024px up the header is one row with every tab shown. It needs --hdr-w; where its
   wrapper is narrower (up to ~1100px) it breaks out to the viewport less a 24px margin each side, and where the wrapper is
   as wide it stays aligned with the page body (the margin is never positive). The prefs tab below follows it. */
@media (min-width:1024px){
  :root{--hdr-w:calc(var(--hdr-tabs, 1060px) + var(--mark-w, 0px) + 10px + var(--hdr-extra, 0px))}   /* the tabs' share (--hdr-tabs: nine tabs at 13px, 980px where they are 12px below), the logo and Mr Macleod's box beside the brand (--mark-w: site-tabs.js, --hdr-extra: mascot.mjs) */
  /* the left edge stays where it was with --hdr-extra 0 (aligned with the page body); the extra width goes to the right,
     and where that would pass the viewport less 16px (the centred wrapper's right edge is (100vw + 100%) / 2) the left edge moves left instead */
  .top,.prefs{--hdr-l:min(0px, calc((100% - min(980px, 100vw - 48px)) / 2), calc((100vw + 100%) / 2 - 16px - min(var(--hdr-w), 100vw - 48px))); margin-left:var(--hdr-l); margin-right:min(0px, calc(100% - min(var(--hdr-w), 100vw - 48px) - var(--hdr-l)))}
  .top{flex-wrap:nowrap;gap:8px}
  .who{flex:none}
  .ptabs{margin-left:0;gap:0;font-size:13px}
  .ptabs a,.ptabs .soon{padding:0 6px}
  .top .btn{padding:0 12px;font-size:14px}
  .tools{gap:8px}
}
@media (min-width:1024px) and (max-width:1139px){ .ptabs{font-size:12px} .ptabs a,.ptabs .soon{padding:0 1.5px} .top{gap:4px} #brand{gap:4px} .who .brand-home{font-size:18px} .tools{gap:4px} .top .btn{padding:0 8px} }   /* the header is 976px: this is how the logo and the cat fit beside every one of the nine tabs */
@media (min-width:1024px) and (max-width:1259px){ :root{--hdr-tabs:980px} }
@media (min-width:1140px) and (max-width:1259px){ .ptabs{font-size:12px} .ptabs a,.ptabs .soon{padding:0 2px} }   /* the header is no wider than the viewport here: the nine tabs fit at 12px */
@media not (min-width:1024px){
  .ptabs{flex:1 1 0;overflow-x:auto;scrollbar-width:none;contain:paint}   /* contain: the scroller leaves the page's text rendering alone */
  .ptabs::-webkit-scrollbar{display:none}
}
@media (max-width:820px){
  .ptabs{order:3;flex:1 0 100%;margin:0 calc(-1 * var(--gut));padding:0 calc(var(--gut) - 10px)}
}
/* Who is signed in (js/site-tabs.js profile, U47): the avatar or initial, the name where the row has room, and a menu.
   Signed out: a "Sign in" link. The menu's Book item shows only on phones, where the header drops its Book button. */
.profile{position:relative}
.pbtn{display:inline-flex;align-items:center;gap:8px;min-height:44px;max-width:220px;padding:0 7px;border-radius:6px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);font:inherit;font-weight:600;font-size:14px;cursor:pointer}
.pbtn[aria-expanded="true"]{border-color:var(--amber)}
.pav{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;object-fit:cover;background:var(--live-soft);color:var(--live);font:700 13px var(--display)}
.pmenu{position:absolute;right:0;top:calc(100% + 6px);z-index:60;display:flex;flex-direction:column;min-width:200px;padding:6px;border:1px solid var(--rule);border-radius:8px;background:var(--paper);box-shadow:var(--shadow)}
.pmenu[hidden]{display:none}
.pmenu [role=menuitem]{display:block;padding:10px 12px;border:0;border-radius:6px;background:transparent;color:var(--ink);font:inherit;font-size:14px;text-align:left;text-decoration:none;cursor:pointer}
.pmenu [role=menuitem]:hover,.pmenu [role=menuitem]:focus-visible{background:var(--ground)}
.pmenu .pphone,.pguest{display:none}
.pguest .i-person{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.pmenu .pby{color:var(--muted)}
.btn.signin{padding:0 14px}
.signin .i-person{display:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
/* From 1024px the header is one row with every tab, with room only for an icon here (the person icon, or the avatar)
   and the Book button's short label. The name is the menu's first line. */
.book .bshort{display:none}
@media (min-width:1024px){ header.top:not([data-layout="slim"]) .btn.signin{width:44px;padding:0} header.top:not([data-layout="slim"]) .signin .i-person{display:block} header.top:not([data-layout="slim"]) .signin .slabel{display:none} header.top:not([data-layout="slim"]) .book .blong{display:none} header.top:not([data-layout="slim"]) .book .bshort{display:inline} }   /* the slim header (no tabs) has room for both labels */
@media (min-width:1140px){ .tools{gap:6px} .top .btn.book{padding:0 10px} }   /* below 1140 the 1024-1139 rule above is tighter still */
.pmenu .pwho{padding:8px 12px 10px;margin-bottom:4px;border-bottom:1px solid var(--rule);font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The compact header (U47; html.hdr-compact / html.hdr-phone from config/pages.yaml header, set by site-tabs.js), full
   or slim alike: fixed at the top, so it stays on screen however far a page scrolls; the page starts below it (--hdr-h)
   and scrolls stop under it. With tabs, the strip fades at the right edge to say it scrolls. On a phone the byline and
   the Book button move into the account menu and Sign in is the menu's person icon; Mr Macleod stays beside the brand. */
.hdr-compact header.top{position:fixed;top:0;left:0;right:0;z-index:50;margin:0;padding:8px var(--gut) 0;row-gap:4px;background:var(--ground);box-shadow:0 1px 0 var(--rule)}
.hdr-compact header.top[data-layout="slim"]{padding-bottom:8px}
.hdr-compact body{padding-top:var(--hdr-h,0px)}
html.hdr-compact{scroll-padding-top:calc(var(--hdr-h,0px) + 8px)}
.hdr-compact .ptabs{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
.hdr-phone .who .by,.hdr-phone .tools .book,.hdr-phone .profile #signIn{display:none}
/* the brand takes what the buttons leave; the title wraps to two lines rather than push them off the row */
.hdr-phone #brand{flex:1 1 0;min-width:0;gap:6px}
.hdr-phone .tools{flex:none;gap:6px}
.hdr-phone .who .brand-home{font-size:17px;line-height:1.05}
.hdr-phone .pmenu .pphone{display:block}
.hdr-phone .pguest{display:grid;place-items:center;width:40px;padding:0}
.hdr-phone .themebtn{width:40px;height:40px}
.hdr-phone .pbtn{min-height:40px}

/* run bar */
.runbar{margin:clamp(28px,4vw,40px) 0 4px}
.scen{display:flex;flex-wrap:wrap;gap:8px}
.scen button{min-height:44px;padding:0 14px;border-radius:6px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);cursor:pointer;font-size:14px;font-weight:500}
.scen button:hover{border-color:var(--amber)}
.scen button[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.pline{margin:12px 0 6px;font-size:16px}
.pline span{font-size:13px;color:var(--muted);margin-right:6px}
.pline q{font-weight:500;quotes:"“" "”"}
.pline .srclbl{display:inline-block;font-family:var(--mono);font-size:12px;margin-left:8px;padding:2px 6px;border:1px solid var(--rule);border-radius:4px}
.pline .srclbl:empty{display:none}
.cutmsg{display:none}
.cut.unreadable>*{visibility:hidden}
.cut.unreadable>.cutmsg{visibility:visible;display:block;grid-column:1 / -1;grid-row:1 / -1;align-self:center;margin:24px 0;padding:16px;border:1px solid var(--ink);border-radius:8px;background:var(--paper);font-size:15px}
.stepper{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0 0;font-size:13px;color:var(--muted)}
.stepper button{min-width:44px;min-height:36px;border-radius:6px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);cursor:pointer;font-family:var(--mono);font-size:13px}
.stepper button:hover{border-color:var(--amber)}
.scen[hidden],.pline[hidden],.stepper[hidden]{display:none}
#stepPos{font-family:var(--mono);margin-left:6px;font-variant-numeric:tabular-nums}

/* cutaway */
.cut{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:auto auto auto;margin:8px 0 0}
.cst{display:contents}
.housing{grid-row:2;grid-column:1 / -1;position:relative;border:2px solid var(--ink);border-radius:16px;background:repeating-linear-gradient(135deg,var(--rule) 0 1.5px,transparent 1.5px 7px);z-index:0}
.fuel{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.fuel .pipe-o{stroke:var(--ink);stroke-width:11;fill:none}
.fuel .pipe-i{stroke:var(--ground);stroke-width:7;fill:none}
.fuel .arrowhead{fill:var(--ink)}
.fuel .arrowchev{fill:none;stroke:var(--ink);stroke-width:1.4}
.fuel .fseg{stroke:var(--amber);stroke-width:5;fill:none}
.fuel .fseg.flow{stroke-dasharray:8 5 !important;stroke-dashoffset:0;animation:flow .55s linear infinite}
@keyframes flow{to{stroke-dashoffset:-13}}
.chamber{grid-row:2;grid-column:var(--i);position:relative;z-index:2;overflow:hidden;margin:14px 5px 40px;height:110px;background:var(--paper);border:1px solid var(--ink);border-radius:8px;display:flex;align-items:center;justify-content:center;transition:border-color .2s,box-shadow .2s,opacity .25s}
.chamber::before{content:"";position:absolute;inset:0;background:var(--fuel);transform:scaleX(var(--fill,0));transform-origin:left center;z-index:0}
.chamber.done::before{opacity:.55}
.chamber.block::before{background:repeating-linear-gradient(135deg,var(--fuel) 0 4px,transparent 4px 8px);opacity:1}
.chamber svg,.chamber .ix{position:relative;z-index:1}
.tap{grid-row:2;grid-column:var(--i);align-self:end;justify-self:center;z-index:1;width:0;height:12px;margin-bottom:29px;border-left:1.5px dotted var(--muted)}
.tap.on{border-left:1.5px solid var(--amber)}
.chamber svg{width:100%;max-width:124px;height:76px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.chamber svg text{fill:var(--muted);stroke:none;font:500 8px var(--mono);text-anchor:middle}
.chamber svg .lt{text-anchor:start}
.chamber svg .cyl .lp{font-size:5px;font-weight:400}
.chamber .ix{position:absolute;top:4px;left:7px;font:600 11px var(--mono);color:var(--muted)}
.chamber .txt{stroke:var(--muted);stroke-width:2.2}
.chamber .xmark,.chamber .tick,.chamber .newc{opacity:0;transition:opacity .25s,transform .5s}
.chamber .srt{stroke-dasharray:4 3}
.chamber .slot{stroke-dasharray:3 3;stroke:var(--muted)}
.chamber .newc{transform:translateY(-34px)}
.chamber.plugged .newc{opacity:1;transform:none}
.chamber.plugged .newc rect{fill:var(--live-soft);stroke:var(--amber)}
.chamber .l5{stroke-dasharray:3 4;stroke:var(--muted)}
.chamber .needle{transition:transform .6s cubic-bezier(.2,.8,.2,1);transform-origin:50px 50px}
.chamber .rotor{transform-origin:50px 32px}
.chamber.active{border-color:var(--amber);box-shadow:0 0 0 3px var(--live-soft)}
.chamber.active .rotor{animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.chamber.skip{opacity:.4;border-style:dashed}
.chamber.none{opacity:.22}
.chamber.block{border-width:2px}
.chamber.block .xmark{opacity:1;stroke:var(--live);stroke-width:2.5}
.chamber.ok .tick{opacity:1;stroke:var(--ok)}
.cyl.hit ellipse,.cyl.hit path{fill:var(--live-soft);stroke:var(--amber)}
.cyl.hit text{fill:var(--live);font-weight:700}
.cyl.small.hit text{fill:var(--live)}
.chamber .l5.hit{stroke:var(--amber);stroke-dasharray:none}
.chamber .valve.bypass{fill:var(--live-soft);stroke:var(--amber)}
.chamber .p-bm.dim,.chamber .p-dn.dim{stroke:var(--rule)}
.co{grid-row:1;grid-column:var(--cs);align-self:end;position:relative;z-index:2;margin:0 5px 14px;text-align:left;border:1px solid var(--rule);background:var(--paper);border-radius:8px;padding:8px 10px;cursor:pointer;color:var(--ink);font:inherit;min-height:44px;display:flex;flex-direction:column;gap:2px;min-width:0;transition:border-color .2s,opacity .25s,background-color .2s}
.co.bottom{grid-row:3;align-self:start;margin:14px 5px 0}
.co::after{content:"";position:absolute;left:var(--lx);bottom:-15px;height:14px;border-left:1.5px solid var(--ink)}
.co.bottom::after{bottom:auto;top:-15px}
.co:hover{border-color:var(--amber)}
.co b{font-size:13px;font-weight:600}
.co code{font:500 11.5px var(--mono);color:var(--live);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cot{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.kind{font-style:normal;font-size:10.5px;font-weight:500;border:1px solid var(--rule);border-radius:4px;padding:0 5px;color:var(--muted);white-space:nowrap}
.kind.dec{border-color:var(--amber);color:var(--live)}
.co code.cfg{color:var(--ink)}
.cfgv{grid-row:2;grid-column:1 / -1;justify-self:end;align-self:start;z-index:3;margin:-11px 18px 0 0;font:500 11px var(--mono);background:var(--ground);color:var(--ink);border:1px solid var(--ink);border-radius:999px;padding:3px 10px;cursor:pointer;min-height:24px}
.cfgv::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:6px;vertical-align:1px}
.cfgv:hover{border-color:var(--amber)}
.tok-y{font-weight:600}
.co .ro{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;min-height:1.3em}
.co .ro em{font-style:normal;font-weight:600}
.ro .pass{color:var(--ok)} .ro .hit{color:var(--live)} .ro .block{color:var(--ink);text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:2px} .ro .miss,.ro .skip,.ro .none,.ro .bypass{color:var(--muted)}
.bus{grid-row:2;grid-column:1 / -1;align-self:end;z-index:2;margin:0 12px 8px;height:22px;border:0;border-top:2px solid var(--ink);background:transparent;color:var(--muted);font-size:11.5px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.bus span{background:var(--ground);padding:0 8px;margin-top:-2px}
.bus code{font-family:var(--mono);color:var(--live)}
.bus.lit{border-top-color:var(--amber)}
.particle{position:absolute;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 5px var(--live-soft),0 0 18px var(--amber);z-index:3;opacity:0;pointer-events:none;transition:opacity .25s}
.particle.on{opacity:1}
.cut.focus .chamber:not(.lit),.cut.focus .co:not(.lit){opacity:.3}
.chamber.lit{border-color:var(--amber)}
.co.lit{border-color:var(--amber);background:var(--live-soft)}
.cut.obsfocus .tap{border-left:1.5px solid var(--amber)}
.cut.obsfocus .bus{border-top-color:var(--amber);color:var(--ink)}

/* trace strip */
.trace{margin-top:18px;border:1px solid var(--rule);border-radius:10px;background:var(--paper);padding:6px 0 0}
.trow{display:grid;grid-template-columns:118px minmax(0,1fr) 64px;align-items:center;gap:0 12px;padding:1px 14px;min-height:24px;cursor:pointer}
.trow:hover{background:var(--ground)}
.trow.sel{background:var(--ground);box-shadow:inset 3px 0 0 var(--ink)}
.taxis{cursor:default;min-height:22px;border-bottom:1px solid var(--rule);margin-bottom:3px}
.taxis:hover{background:transparent}
.tl{font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.taxis .tl,.taxis .tms{font-size:11.5px;color:var(--muted);font-weight:400}
.tlane{position:relative;height:12px;background-image:linear-gradient(90deg,var(--rule) 1px,transparent 1px);background-size:var(--tick,25%) 100%}
.taxis .tlane{height:16px;background:none;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.taxis .tlane span{position:absolute;top:1px;transform:translateX(-50%);white-space:nowrap}
.taxis .tlane span:first-child{transform:none}
.tbar{position:absolute;top:2px;height:8px;border-radius:2px;background:var(--ink);width:0}
.tbar.hit{background:var(--amber)}
.tbar.block{background:repeating-linear-gradient(135deg,var(--ink) 0 3px,transparent 3px 6px);box-shadow:inset 0 0 0 1px var(--ink)}
.tbar.async{background:repeating-linear-gradient(90deg,var(--muted) 0 6px,transparent 6px 10px)}
.tms{font-size:12px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.trow.slow .tms{color:var(--ink);font-weight:600}
.tinfo{margin:4px 0 0;padding:9px 14px;border-top:1px solid var(--rule);font-size:13.5px;min-height:40px}
.tinfo b{font-weight:600}
.esum{margin:12px 0 2px;font-size:16px;max-width:48em}
.esum b{font-weight:600}

/* code highlighting (inspector Code tab) */
.ln{display:block;padding:0 16px}
.ln.mark{background:var(--live-soft);box-shadow:inset 3px 0 0 var(--amber)}
.tok-c{color:var(--muted);font-style:italic}
.tok-s{color:var(--live)}
.tok-k{font-weight:600}
.tok-n{color:var(--ok)}
.tok-d{color:var(--live);font-weight:600}

@media (max-width:820px){
  .cut{grid-template-columns:104px minmax(0,1fr);grid-template-rows:repeat(8,auto) auto;column-gap:0}
  .housing{grid-column:1;grid-row:1 / span 8}
  .chamber{grid-column:1;grid-row:var(--sr,var(--i));margin:5px 9px;height:70px}
  .chamber svg{height:50px}
  .chamber::before{transform:scaleY(var(--fill,0));transform-origin:center top}
  .tap{display:none}
  .co,.co.bottom{padding:6px 9px;gap:1px}
  .co code{font-size:11px}
  .co,.co.bottom{grid-column:2 !important;grid-row:var(--sr,var(--i)) !important;align-self:center;margin:3px 0 3px 16px}
  .co::after,.co.bottom::after{left:-16px;top:50%;bottom:auto;height:0;width:15px;border-left:0;border-top:1.5px solid var(--ink)}
  .bus{grid-column:1 / -1;grid-row:9;margin:10px 0 0;height:auto;min-height:32px;border-top:2px solid var(--ink)}
  .bus span{margin-top:0;padding:4px 0;background:transparent;text-align:center}
  .cfgv{grid-column:1 / -1;grid-row:10;justify-self:start;margin:8px 0 0}
}

/* code pane (inspector Code tab) and waterfall */
#trace{margin-top:14px;padding:0}
.codepane{overflow:hidden}
.cphead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px 6px 14px;border-bottom:1px solid var(--rule);min-height:46px}
.cpnow{font:600 12px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cpnow i{font-style:normal;color:var(--muted);font-weight:400}
#cpsel{font:500 12px var(--mono);min-height:34px;border:1px solid var(--rule);border-radius:6px;background:var(--ground);color:var(--ink);max-width:46%;padding:0 6px}
#cppre{margin:0;padding:10px 0;height:340px;overflow:auto;font:12px/1.6 var(--mono);background:var(--ground);tab-size:4}
#cpcode{display:block;min-width:max-content}
.tg + .tg{border-top:1px solid var(--rule)}
.tghead{display:flex;width:100%;justify-content:space-between;align-items:baseline;gap:8px;background:none;border:0;padding:9px 14px;color:var(--ink);cursor:pointer;min-height:40px;text-align:left}
.tghead::before{content:"\25BE";font-size:11px;color:var(--muted);margin-right:2px}
.tghead[aria-expanded="false"]::before{content:"\25B8"}
.tgname{font-weight:600;font-size:13px;margin-right:auto}
.tgsub{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.tghead[aria-expanded="false"] + .tgbody{display:none}
.tgbody{padding-bottom:4px}
#trace .trow{grid-template-columns:minmax(0,220px) minmax(0,1fr) 54px;min-height:20px;padding:0 14px}
#trace .tl{font:500 11.5px var(--mono);padding-left:calc(var(--d,0) * 12px)}
#trace .trow.new{animation:rowin .35s ease-out}
@keyframes rowin{from{background:var(--fuel)}to{background:transparent}}
#trace .trow.now .tl{color:var(--live);font-weight:600}
#trace .tlane{height:10px}
#trace .tbar{top:1px}
.chamber.empty{border-style:dashed;border-color:var(--muted)}
.chamber.empty svg{opacity:.18}
.chamber.slotted{animation:slotin .5s cubic-bezier(.2,.8,.2,1)}
@keyframes slotin{from{transform:translateY(-8px);box-shadow:0 0 0 4px var(--fuel)}to{transform:none}}
.chamber.flash{box-shadow:0 0 0 3px var(--fuel)}
@media (max-width:820px){
  #cppre{height:230px}
  #trace .trow{grid-template-columns:minmax(0,132px) minmax(0,1fr) 50px}
}

@media (prefers-reduced-motion: reduce){
  body{transition:none}
}

/* compact header; diagram sizing for the full engine view */
.top{padding:12px 0}
.kind.graph{border-color:var(--ink);color:var(--ink)}
.co code.graph{color:var(--ink)}
.co .att{font-size:11px;border:1px solid var(--amber);border-radius:4px;padding:0 4px;color:var(--live);margin-left:4px}
.ro .fail{color:var(--live)}
.cut{grid-template-columns:repeat(var(--n,10),minmax(0,1fr))}
.chamber{margin:50px 4px 74px;height:104px}
.chamber svg{height:70px}
.tap{height:42px;margin-bottom:31px;z-index:0}   /* under the pipes, so no tap line cuts an arc label */
.fuel .apipe-o{stroke:var(--ink);stroke-width:8;fill:none;stroke-linejoin:round}
.fuel .apipe-i{stroke:var(--ground);stroke-width:5;fill:none;stroke-linejoin:round}
.fuel .afuel{stroke:var(--amber);stroke-width:3;fill:none;stroke-linejoin:round}
.fuel .afuel.flow{stroke-dasharray:6 5 !important;stroke-dashoffset:0;animation:flow .55s linear infinite}
.fuel .arcl{font:500 9.5px var(--mono);fill:var(--muted);stroke:var(--ground);stroke-width:3px;paint-order:stroke;stroke-linejoin:round}
.fuel .arcl.on{fill:var(--live);font-weight:600}
.fuel .forkl{font:500 9.5px var(--mono);fill:var(--muted)}   /* a routed fork's edge (run-view.js): shown in every layout */
.fuel .forkl.on{fill:var(--live);font-weight:600}
.chamber .g-ok,.chamber .g-no,.chamber .u-ok,.chamber .u-no{opacity:0;transition:opacity .25s}
.chamber.gok .g-ok,.chamber.uok .u-ok{opacity:1;stroke:var(--ok);stroke-width:2.2}
.chamber.gno .g-no,.chamber.uno .u-no{opacity:1;stroke:var(--live);stroke-width:2.4}
.chamber.okm .tick{opacity:1;stroke:var(--ok)}
.chamber.fail .xmark{opacity:1;stroke:var(--live);stroke-width:2.4}
.chamber.fail{border-color:var(--amber);border-style:dashed}
.chamber .sock{transition:fill .2s,stroke .2s}
.chamber.skon .sk,.chamber.mcon .mc{fill:var(--fuel);stroke:var(--amber)}
.chamber.subon .subset{fill:var(--fuel);stroke:var(--amber)}
.chamber .subtxt{font-weight:600}
.chamber.direct .rd{stroke:var(--amber);stroke-width:2.4}
.chamber.direct .valve{fill:var(--fuel);stroke:var(--amber)}
.tbar.fail{background:repeating-linear-gradient(135deg,var(--amber) 0 3px,transparent 3px 6px);box-shadow:inset 0 0 0 1px var(--amber)}
@media (max-width:820px){
  .scen{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;margin:0 calc(-1 * var(--gut));padding-left:var(--gut);padding-right:var(--gut);scrollbar-width:none}
  .scen button{flex:none}
  .tap{display:none}
  .cut{grid-template-columns:132px minmax(0,1fr);grid-template-rows:repeat(var(--n,10),auto) auto auto}
  .housing{grid-row:1 / span var(--n,10)}
  .chamber{margin:5px 22px 5px 30px;height:64px}
  .chamber svg{height:46px}
  .bus{grid-row:var(--n1,11)}
  .cfgv{grid-row:var(--n2,12)}
  .fuel .arcl{display:none}
}
/* pickers, live/replay */
.picks{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 8px;font-size:12.5px;color:var(--muted)}
.pk{display:inline-flex;align-items:center;gap:5px}
.pk select{font:500 12.5px var(--mono);min-height:34px;border:1px solid var(--rule);border-radius:6px;background:var(--paper);color:var(--ink);padding:0 6px}
.pk select:hover{border-color:var(--amber)}
.mode{font:600 12px var(--mono);border:1px solid var(--rule);border-radius:999px;padding:3px 10px;color:var(--ink);white-space:nowrap}
.mode::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--muted);margin-right:6px;vertical-align:1px}
.mode.live{border-color:var(--amber)}
.mode.live::before{background:var(--ok)}
.rec{display:inline-flex;align-items:center;gap:5px;color:var(--ink);min-height:34px}
.rec[hidden]{display:none}
.pkmsg{color:var(--ink);min-width:0}
.pkmsg.err{color:var(--live);font-weight:600}
.bus[hidden]{display:none}
/* arc labels sit on their pipe, on a plate */
.fuel .arcp{fill:var(--ground)}
.fuel .arcl{stroke:none}
/* focus (embed ?focus=) */
.chamber.focusd{border-color:var(--amber);box-shadow:0 0 0 3px var(--fuel)}
.co.focusd{border-color:var(--amber)}
.cut.norec>*:not(.cutmsg){opacity:.25}
.cut.norec>.cutmsg{display:block;grid-column:1 / -1;grid-row:1 / -1;align-self:center;justify-self:center;z-index:5;margin:24px 0;padding:14px 16px;border:1px dashed var(--ink);border-radius:8px;background:var(--paper);font-size:15px}
/* inspector */
.insp{margin-top:10px;border:1px solid var(--rule);border-radius:10px;background:var(--paper);overflow:hidden}
.ihead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding:8px 10px 8px 14px;border-bottom:1px solid var(--rule)}
.inow{font:600 13px var(--mono);min-width:0;overflow-wrap:anywhere}
.inow i{font-style:normal;color:var(--live)}
.inow small{font:400 12px var(--sans);color:var(--muted)}
.insp .stepper{margin:0}
.itabs{display:flex;gap:4px;padding:8px 10px 0;overflow-x:auto;scrollbar-width:none}
.itabs button{font:500 12.5px var(--mono);min-height:36px;padding:0 12px;border-radius:6px 6px 0 0;border:1px solid transparent;border-bottom:0;background:transparent;color:var(--muted);cursor:pointer;flex:none}
.itabs button[aria-selected="true"]{border-color:var(--rule);background:var(--ground);color:var(--ink)}
.ibody{border-top:1px solid var(--rule);background:var(--ground);min-height:120px}
.ipanel[hidden]{display:none}
.ipanel{padding:12px 14px}
.ipanel[data-tab="code"]{padding:0}
.iaway{margin:0;padding:12px 14px;font-size:13.5px;color:var(--muted)}
.iaway[hidden]{display:none}
.ires,.icache,.icfg{font-size:13.5px}
.ires h4,.icfg h4{margin:0 0 6px;font:600 13px var(--sans)}
.ires p{margin:0 0 8px}
.ires .err{color:var(--live);font-weight:600}
.ires ul{margin:0 0 8px;padding-left:18px}
/* The Respond stage's answer bubble (U17, js/respond.js): inside #ires, which keeps its fixed height and scrolls. */
.ires .rbubble{background:var(--ground);border:1px solid var(--rule);border-radius:12px 12px 12px 3px;padding:8px 10px;margin:0 0 8px}
.ires .rtext{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.ires .rchips{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.ires .rchead{color:var(--muted);font-size:12px}
.ires .rchip{font:500 11.5px var(--mono);border:1px solid var(--rule);border-radius:999px;padding:1px 7px;overflow-wrap:anywhere}
.ires .rread{color:var(--muted);font:500 12px var(--mono)}
.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:2px 12px;margin:0 0 8px;font:12.5px var(--mono)}
.kv dt{color:var(--muted)}
.kv dd{margin:0;overflow-wrap:anywhere}
.itable{border-collapse:collapse;font:12px var(--mono);margin:0 0 8px;width:100%}
.itable th,.itable td{text-align:left;padding:3px 8px 3px 0;border-bottom:1px solid var(--rule);overflow-wrap:anywhere}
.itable th{color:var(--muted);font-weight:500}
.term{margin:12px 0 0;padding:10px 12px;max-height:220px;overflow:auto;font:12px/1.55 var(--mono);background:var(--paper);border:1px solid var(--rule);border-radius:8px;white-space:pre-wrap;overflow-wrap:anywhere}
.term .warn{color:var(--live);font-weight:600}
.term .sp{color:var(--muted)}
.term .none{color:var(--muted);font-style:italic}
.crow{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--rule)}
.crow b{font:600 12.5px var(--mono)}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chip2{font:500 11.5px var(--mono);border:1px solid var(--rule);border-radius:4px;padding:1px 6px;background:var(--paper)}
.chip2.hit{border-color:var(--amber);color:var(--live);font-weight:600}
.chip2.put{border-color:var(--ink)}
.chips .none{font-size:12px;color:var(--muted)}
.icfg pre{margin:0 0 8px;padding:8px 10px;font:12px/1.6 var(--mono);background:var(--paper);border:1px solid var(--rule);border-radius:8px;overflow:auto;white-space:pre}
.icfg p{margin:0 0 6px;color:var(--muted);font-size:12.5px}
/* inspector panel shown at the stage: expand (card grows) or callout (anchored to the box) */
.ifloat{position:absolute;z-index:6;background:var(--paper);border:1.5px solid var(--amber);border-radius:8px;box-shadow:var(--shadow);max-height:260px;overflow:auto;font-size:13.5px}
.ifloat[hidden]{display:none}
.ifloat .fhead{position:sticky;top:0;display:flex;justify-content:space-between;gap:8px;padding:6px 10px;background:var(--live-soft);font:600 12px var(--mono);border-bottom:1px solid var(--rule);z-index:1}
.ifloat .ipanel{background:var(--paper)}
.ifloat .term{max-height:none}
.leader{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:5;overflow:visible;display:none}
.leader.on{display:block}
.leader line{stroke:var(--amber);stroke-width:1.5;stroke-dasharray:4 3}
.co.expanded{border-color:var(--amber);background:var(--live-soft)}
@media (max-width:820px){
  .picks{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(-1 * var(--gut)) 8px;padding:0 var(--gut) 4px;scrollbar-width:none}
  .pk,.mode,.rec{flex:none}
  .pkmsg{flex:none;white-space:nowrap}
  .ihead{padding:8px 10px}
}
/* a status chip on a card (RunView.badges) */
.co .cbadge,.cd-pills .cbadge{align-self:flex-start;font:500 10.5px var(--mono);border:1px solid var(--rule);border-radius:4px;padding:0 5px;color:var(--muted);white-space:nowrap}
/* provenance chip (RunView.provChip): a button that explains itself; #legend lists the kinds on the page */
.prov{font:500 12px var(--mono);color:var(--ink);background:none;border:1px solid var(--rule);border-radius:4px;padding:2px 6px;cursor:help}
.mode .prov{border:0;padding:0;font:inherit;background:none}
.prov:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.prov-tip{position:fixed;z-index:60;max-width:min(320px,calc(100vw - 16px));padding:8px 10px;background:var(--ink);color:var(--paper);border-radius:6px;font-size:13px;line-height:1.4}
.prov-tip[hidden]{display:none}
.playing-below{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:60;margin:0;max-width:calc(100vw - 32px);padding:8px 12px;background:var(--ink);color:var(--paper);border-radius:8px;font-size:13px;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.playing-below[hidden]{display:none}
.playing-below a{color:inherit;text-decoration:underline;font-weight:600;padding:6px 2px}
.legend{margin:6px 0;font-size:13px;color:var(--muted)}
.legend[hidden]{display:none}
.legend p{margin:2px 0}
.legend .cbadge{font:500 10.5px var(--mono);font-style:normal;border:1px solid var(--rule);border-radius:4px;padding:0 5px;color:var(--muted);white-space:nowrap;margin-right:6px}
.fnav{margin-left:16px;white-space:nowrap}
/* lanes and wide columns (diagram.js grid): a one-lane view with paired cards sets none of these classes */
@media (min-width:821px){
  .cut.wide:not(.stack){grid-template-columns:var(--cols)}
  .cut:not(.stack) .cst.wide .chamber{justify-self:center;width:calc(var(--cw) - 8px)}   /* one column's box, centred in its wider cell */
  .cut:not(.stack) .cst.lane .chamber{grid-row:var(--r);align-self:end;margin:14px 4px 0}   /* on its card, however tall the row */
  .cut:not(.stack) .cst.lane .tap{display:none}
  .cut:not(.stack) .cst.lane .co{grid-row:var(--cr);margin:14px 22px 0}   /* clear of the fork and join pipes down the edges */
}
/* .stack: drawn top to bottom. run-view.js fitCards sets it on a phone, where the media rules above already do the
   same, and on a wider page whose columns cannot hold every card whole. These repeat the phone rules for that case. */
.cut.stack{grid-template-columns:132px minmax(0,1fr);grid-template-rows:repeat(var(--n,10),auto) auto auto;column-gap:0}
.cut.stack .housing{grid-column:1;grid-row:1 / span var(--n,10)}
.cut.stack .chamber{grid-column:1;grid-row:var(--sr,var(--i));margin:5px 22px 5px 30px;height:64px}
.cut.stack .chamber svg{height:46px}
.cut.stack .chamber::before{transform:scaleY(var(--fill,0));transform-origin:center top}
.cut.stack .tap{display:none}
.cut.stack .co,.cut.stack .co.bottom{padding:6px 9px;gap:1px;grid-column:2 !important;grid-row:var(--sr,var(--i)) !important;align-self:center;margin:3px 0 3px 16px}
.cut.stack .co code{font-size:11px}
.cut.stack .co::after,.cut.stack .co.bottom::after{left:-16px;top:50%;bottom:auto;height:0;width:15px;border-left:0;border-top:1.5px solid var(--ink)}
.cut.stack .bus{grid-column:1 / -1;grid-row:var(--n1,11);margin:10px 0 0;height:auto;min-height:32px}   /* .bus keeps its own border, so .lit still shows */
.cut.stack .bus span{margin-top:0;padding:4px 0;background:transparent;text-align:center}
.cut.stack .cfgv{grid-column:1 / -1;grid-row:var(--n2,12);justify-self:start;margin:8px 0 0}
.cut.stack .fuel .arcl{display:none}
/* lanes, top to bottom: a column's boxes side by side, their cards under them */
.cut.stack.lanes{grid-template-columns:repeat(var(--lanes),minmax(0,1fr))}
.cut.stack.lanes .chamber{grid-column:var(--vk);grid-row:var(--vr)}
.cut.stack.lanes .co{grid-column:var(--vcc) !important;grid-row:var(--vcr) !important}
.cut.stack.lanes .cst.st .chamber{margin:16px 12px 4px}
.cut.stack.lanes .cst.st .co{margin:8px 6px 3px;padding:6px}
.cut.stack.lanes .cst.st .co::after{left:50%;top:-9px;height:8px;width:0;border-top:0;border-left:1.5px solid var(--ink)}

/* An attached stage (diagram.js: the vector database under retrieve). Left to right it takes one row below every other
   row: its box in its host's column, its card beside it (.left: before it, in the last column); top to bottom, a row of its own after its host's, its box and card in
   the card column beside the main pipe, or (.st, under a block's stacked host) in the host's lane column. run-view.js
   draws the two-way pipe between it and its host. */
.cst.att .chamber svg{height:46px}
.cut:not(.stack) .cst.att .chamber{grid-row:var(--ar);grid-column:var(--i);align-self:center;margin:20px 5px 0;height:64px}
.cut:not(.stack) .cst.att .co{grid-row:var(--ar);grid-column:var(--acs);align-self:center;margin:20px 5px 0}
.cut:not(.stack) .cst.att .co::after{left:-11px;top:50%;bottom:auto;height:0;width:10px;border-left:0;border-top:1.5px solid var(--ink)}
.cut:not(.stack) .cst.att.left .co::after{left:auto;right:-11px}
.cut:not(.stack) .cst.att.tall .co{grid-row:var(--acr);grid-column:var(--i);align-self:start;margin:14px 22px 0}
.cut:not(.stack) .cst.att.tall .co::after{left:50%;top:-15px;height:14px;width:0;border-top:0;border-left:1.5px solid var(--ink)}
.cut.stack .cst.att .chamber{grid-column:2 / -1;grid-row:var(--sr);justify-self:start;width:80px;height:56px;margin:5px 0 5px 16px}
.cut.stack .cst.att .co{grid-column:2 / -1 !important;grid-row:var(--sr) !important;margin:3px 0 3px 112px}
.cut.stack .cst.att.st .chamber{grid-column:var(--sc);justify-self:stretch;width:auto;margin:16px 12px 4px}
.cut.stack .cst.att.st .co{grid-column:var(--sc) !important;grid-row:var(--scr) !important;margin:8px 6px 3px;padding:6px}
.cut.stack .cst.att.st .co::after{left:50%;top:-9px;height:8px;width:0;border-top:0;border-left:1.5px solid var(--ink)}
.cut.stack .cst.att:has(.cpslot:not(:empty)) .co{margin-bottom:18px}   /* room under the card for its pill (config-pill.js hangs it 15px below), clear of the next row */
.fuel .attp-o{stroke:var(--ink);stroke-width:11;fill:none}
.fuel .attp-i{stroke:var(--ground);stroke-width:7;fill:none}

/* The answer going into the cache and coming back out (16d). Only a run with a write-back, a served hit or a
   quarantine adds these, so every other run draws exactly as before. */
.co .centry{display:flex;flex-direction:column;font:500 10.5px/1.35 var(--mono);color:var(--muted);min-width:0}
.co .centry>span{overflow-wrap:anywhere}
.co .centry>.cprev{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.co .cspin{display:inline-block;width:8px;height:8px;margin-right:4px;border:1.5px solid var(--amber);border-right-color:transparent;border-radius:50%;vertical-align:-1px;animation:spin .8s linear infinite}
.cyl.put ellipse,.cyl.put path{fill:var(--live-soft);stroke:var(--ok)}
.cyl.put text{fill:var(--ok);font-weight:700}
.fuel .afuel.wb{stroke:var(--ok)}
.cut.wbk:not(.stack) .chamber{margin-bottom:92px}   /* room for the write-back arc (track 3) above the trace bus */
.cut.wbk:not(.stack) .tap{height:60px}
.ires p.served{font:12px var(--mono);color:var(--live)}
.icache h4{margin:0 0 6px;font:600 13px var(--sans)}
.icache .centries{list-style:none;margin:0 0 10px;padding:0}
.centrybtn{display:block;width:100%;text-align:left;min-height:28px;margin:0 0 4px;border:1px solid var(--rule);border-radius:5px;background:var(--paper);color:var(--ink);font:12px/1.5 var(--mono);padding:3px 6px;cursor:pointer;overflow-wrap:anywhere}
.centrybtn:hover,.centrybtn:focus-visible{border-color:var(--amber)}
@media (prefers-reduced-motion: reduce){
  .fuel .fseg.flow,.fuel .afuel.flow{animation:none}   /* the dashes stay, static; the arrowheads still show the direction */
  .fuel .afuel.wb.flow{animation:none;stroke-dasharray:none !important}   /* the arc becomes a static highlight */
  .co .cspin{animation:none}
}

/* Req 1: nothing moves while a run plays. Every box a run writes into has its size before the run starts: the sizes are
   config (config/view.yaml layout), set by run-view.js as --card-lines, --ro-lines, --insp-h, --wf-h and --res-h on the
   run view's root. data-scroll marks a fixed-size region whose content changes (and may scroll) inside it; data-anim
   marks decor allowed to move (the particle, the pipes' SVG, the leader, spinners). */
.co .ro{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--ro-lines);overflow:hidden;line-height:1.3;height:calc(var(--ro-lines) * 1.3em);min-height:0;overflow-wrap:anywhere}
.co .centry{height:calc(var(--card-lines) * 1.35em);line-height:1.35;overflow-y:auto;overflow-x:hidden;flex:none}   /* a put can have more lines than card_lines (the preview takes 2): the rest scroll inside the reserved box */
.co .centry>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none}
.co .centry>.cprev{white-space:normal;overflow-wrap:anywhere}
.co .cbadge{position:absolute;top:-8px;right:6px;background:var(--paper);line-height:14px}   /* its own slot on the card's edge: no reflow */
.inow{flex:1 1 18ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#stepPos{display:inline-block;width:13ch;white-space:nowrap}
.mode{display:inline-block;min-width:13ch;text-align:center}
.ibody{height:var(--insp-h);min-height:0;overflow:auto}
.ires{height:var(--res-h);overflow:auto}
.term{height:var(--res-h);max-height:none}
/* the code pane fills the inspector body: its header, then the code */
.ipanel[data-tab="code"]{height:100%}
.codepane{display:flex;flex-direction:column;height:100%}
.cphead{flex:none}
#cppre{flex:1 1 auto;min-height:0;height:auto}
#trace{height:var(--wf-h);display:flex;flex-direction:column}
#trace .tg{display:flex;flex-direction:column;min-height:0;flex:none}
#trace #tgReq{flex:1 1 0}
#trace .tgbody{flex:1 1 auto;min-height:0;overflow:auto}
#trace #tgSetup .tgbody{max-height:calc(var(--wf-h) / 2)}
@media (max-width:820px){
  .ibody{height:var(--insp-h-phone)}
  .ires,.term{height:var(--res-h-phone)}
  #trace{height:var(--wf-h-phone)}
  #trace #tgSetup .tgbody{max-height:calc(var(--wf-h-phone) / 2)}
}
.tghead{flex:none}
.tgsub{flex:1 1 0;min-width:0;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#trace .tinfo{flex:none;height:40px;min-height:0;overflow:auto;box-sizing:border-box}
.esum{height:calc(var(--sum-lines) * 1.5em);line-height:1.5;overflow:auto}
.pline{line-height:1.5;height:calc(var(--prompt-lines) * 1.5em);overflow:auto}   /* the prompt: its lines reserved, a longer one scrolls inside */
/* The config pill (U11, js/config-pill.js): on its card's bottom edge, placed in the cut's px; its tooltip and dialog. */
.cpslot{position:absolute;z-index:3;line-height:0}
.cpslot:empty{display:none}
.cut:has(.cpslot:not(:empty)){padding-bottom:16px}   /* room for a bottom card's pill */
.cpill{font:500 10.5px var(--mono);line-height:1;padding:3px 8px;border:1px solid var(--amber);border-radius:999px;background:var(--paper);color:var(--live);cursor:pointer;white-space:nowrap}
.cpill:hover,.cpill:focus-visible{background:var(--live-soft)}
.cpill:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.cptip{position:fixed;z-index:60;max-width:min(360px,calc(100vw - 16px));max-height:50vh;overflow:auto;padding:6px 9px;border:1px solid var(--rule);border-radius:6px;background:var(--paper);color:var(--ink);font:500 11px/1.5 var(--mono);box-shadow:0 4px 14px rgba(0,0,0,.12);pointer-events:none}
.cptip div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfgdlg{width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:0;border:1px solid var(--rule);border-radius:10px;background:var(--paper);color:var(--ink);overflow:auto;box-sizing:border-box}
.cfgdlg::backdrop{background:rgba(13,15,18,.35)}
.cfg-head{display:flex;align-items:center;gap:8px;padding:12px 14px 4px}
.cfg-head h2{flex:1 1 auto;margin:0;font-size:16px;font-weight:600}
.cfg-close{flex:none;width:32px;height:32px;border:1px solid var(--rule);border-radius:6px;background:none;color:var(--ink);font-size:18px;cursor:pointer}
.cfgdlg .cfg-intro{margin:2px 14px 8px;font-size:13px;color:var(--muted)}
.cfg-rows{list-style:none;margin:0;padding:0 14px 12px}
.cfg-row{padding:8px 0;border-top:1px solid var(--rule)}
.cfg-kv{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.cfg-k{font:600 12.5px var(--mono)}
.cfg-v{font:500 12.5px var(--mono);color:var(--live);overflow-wrap:anywhere}
.cfg-at{margin-left:auto;font:400 11px var(--mono);color:var(--muted);overflow-wrap:anywhere}
.cfg-ctl{font:inherit;font-size:13px;max-width:100%}
.cfg-row p{margin:3px 0 0;font-size:13px;line-height:1.45}
.cfg-row .cfg-when,.cfg-row .cfg-cost{color:var(--muted)}

/* Mr Macleod (js/mascot.mjs): a fixed box, so the header and the strip never change size as he animates */
.mascot{flex:none;display:block;width:var(--mascot-w);height:var(--mascot-h);overflow:hidden;pointer-events:none}
.mascot[hidden]{display:none}
.mascot mr-macleod{display:block}
#brand{display:flex;align-items:center;gap:10px}
.brand-mark{flex:none;display:block;line-height:0;width:var(--mark-w);height:var(--mark-w)}
.brand-mark img{display:block;width:100%;height:100%}
.brand-mark .mark-dark,:root[data-theme="dark"] .brand-mark .mark-light{display:none}
:root[data-theme="dark"] .brand-mark .mark-dark{display:block}