/* Cell drawings (ISO3D, assets/js/iso/). Line art on white, ink outlines, three colours with a meaning:
   yellow = the robot (FANUC), light blue = the machine it serves, brass = the part (hot metal glows orange, never red).
   One line weight (1 px) everywhere; legs and posts are single lines. Classes are the ones the models give their primitives. */
.iso { position: relative; }
.iso [data-mv-stage] { position: relative; }
.iso .mview__svg { display: block; width: 100%; height: auto; overflow: visible; }
.iso .mview__svg * { vector-effect: non-scaling-stroke; }
.iso .mview__hots { position: absolute; inset: 0; pointer-events: none; }

.mview__svg .f { fill: var(--paper); stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
.mview__svg .al { fill: #E7ECEF; stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
.mview__svg .dk { fill: var(--steel); stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
.mview__svg .rb { fill: var(--robot); stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
.mview__svg .mc { fill: var(--machine); stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
.mview__svg .cold { fill: var(--brass); stroke: var(--brass-line); stroke-width: 1; stroke-linejoin: round; }
.mview__svg .l { fill: none; stroke: var(--ink); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.mview__svg .lt { stroke-opacity: .4; }
.mview__svg .jt { fill: var(--ink); }

.mview__svg .tube-o, .mview__svg .tube-f { fill: none; stroke-linecap: round; vector-effect: none; }
.mview__svg .tube-o { stroke: var(--ink); }
.mview__svg .tube-f { stroke: var(--paper); }
.mview__svg .t-rb { stroke: var(--robot); }
.mview__svg .t-dk { stroke: var(--steel); }

.mview__svg .mesh { fill: url(#iso-mesh); stroke: var(--ink); stroke-width: 1; }
.mview__svg .mesh-w { fill: url(#iso-mesh); stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
#iso-mesh path { fill: none; stroke: var(--line-strong); stroke-width: .6; }

/* heat: 3 just forged … 0 cold (brass); a part's outline is a darker brass, so it stays light */
.mview__svg .h3 { fill: #FF7A1A; stroke: #7A2E05; stroke-width: 1; stroke-linejoin: round; }
.mview__svg .h2 { fill: #E8843E; stroke: #6B3413; stroke-width: 1; stroke-linejoin: round; }
.mview__svg .h1 { fill: #E2A757; stroke: var(--brass-line); stroke-width: 1; stroke-linejoin: round; }
.mview__svg .h0 { fill: var(--brass); stroke: var(--brass-line); stroke-width: 1; stroke-linejoin: round; }
.mview__svg .h0.l, .mview__svg .h1.l { fill: none; }
.mview__svg .glow { fill: #FF9A3D; opacity: .55; }
.mview__svg .flame { fill: #FF8A1F; stroke: #B4530A; stroke-width: 1; stroke-linejoin: round; }
.mview__svg .flame-in { fill: #FFD45C; }
.mview__svg .smoke { fill: none; stroke: #A3AFB7; stroke-width: 1.2; stroke-linecap: round; opacity: .75; }
.mview__svg .fan { fill: none; stroke: var(--ink); stroke-width: 1; stroke-linecap: round; }
.mview__svg .ghost { fill-opacity: .28; stroke-opacity: .6; }

/* the factory layout: places marked on the floor (dashed), their labels lying flat, the mobile robots' route */
.mview__svg .dash { stroke-dasharray: 8 6; stroke-opacity: .7; }
.mview__svg .route { stroke: var(--blue); stroke-dasharray: 2 7; }
.mview__svg .lbl { fill: var(--steel); font-family: var(--font-mono); letter-spacing: .04em; }
.mview__svg .lbl-n { fill: var(--blue); }
.mview__svg .ext { stroke: none; fill: none; }                                    /* counted for the frame, never seen */

/* iroCUBE MF7 (models/mf7.js, from irocube.com): the classes it uses that the cells above do not.
   The cell keeps iroCUBE's own look: the petrol cover with the IROCUBE MF7 wordmark, the yellow door. */
.iso { --mv-paper: var(--paper); --mv-line: var(--ink); --mv-y: var(--irocube); --mv-pt: #033D5B; --signal: var(--irocube); }
.mview__svg .fl { fill: var(--mist); stroke: var(--mv-line); stroke-width: .6; }
.mview__svg .sh { fill: var(--mv-paper); fill-opacity: .8; stroke: var(--mv-line); stroke-width: 1; stroke-linejoin: round; }
.mview__svg .roof { fill: var(--mv-paper); stroke: var(--mv-line); stroke-width: 1; stroke-linejoin: round; }
.mview__svg .pt { fill: var(--mv-pt); stroke: var(--mv-line); stroke-width: 1; stroke-linejoin: round; }
.mview__svg .y { fill: var(--mv-y); stroke: var(--mv-line); stroke-width: 1; stroke-linejoin: round; }
.mview__svg .scr { fill: #13242E; stroke: none; }
.mview__svg .key { fill: #8995A0; stroke: none; }
.mview__svg .ui { fill: none; stroke: rgba(255,255,255,.55); stroke-width: .8; }
.mview__svg .ui--ok { stroke: var(--ok); }
.mview__svg .red { fill: #D9363E; stroke: var(--mv-line); stroke-width: .8; }   /* the emergency stop and the tower lamp only */
.mview__svg .grn { fill: #3DBE6E; stroke: var(--mv-line); stroke-width: .8; }
.mview__svg .blu { fill: var(--blue); stroke: var(--mv-line); stroke-width: .8; }
.mview__svg .amb { fill: var(--signal); stroke: var(--mv-line); stroke-width: .8; }
.mview__svg .btn { fill: #FFE9A8; stroke: var(--mv-line); stroke-width: .8; }
.mview__svg .belt { fill: #DDE3E7; stroke: none; }
.mview__svg .belt--lit { fill: #F5F1DE; }
.mview__svg .belt--glow { fill: #FFF6CF; stroke: none; }
.mview__svg .fn { fill: var(--mv-paper); stroke: none; }
.mview__svg .part { fill: var(--brass); stroke: var(--brass-line); stroke-width: 1; stroke-linejoin: round; }
.mview__svg .part--fin { fill: #EED79A; }                                        /* machined: bright brass */
.mview__svg .cable { fill: none; stroke: var(--steel); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mview__svg .wm { fill: #FFFFFF; font-family: var(--font-sans); font-weight: 800; letter-spacing: .04em; font-stretch: var(--wdth-display-pct); }
.mview__svg .wm--y { fill: var(--signal); }
.mview__svg .plate { fill: #FFFFFF; fill-opacity: .7; stroke: var(--mv-line); stroke-width: .8; }
.mview__svg .cam { fill: var(--blue); stroke: var(--mv-line); stroke-width: .8; stroke-linejoin: round; }
.mview__svg .led { fill: #CBD2D6; stroke: var(--mv-line); stroke-width: .7; }
.mview__svg .led--on { fill: #FFF3B0; }
.mview__svg .hood { fill: none; stroke: var(--blue); stroke-width: .8; stroke-dasharray: 5 4; stroke-opacity: .7; }
.mview__svg .lbox { fill: #D5DBDF; stroke: var(--mv-line); stroke-width: .7; }
.mview__svg .lbox--on { fill: #FFF6C8; }
.mview__svg .lace { fill: none; stroke: var(--steel-soft); stroke-width: 1.2; stroke-linejoin: round; }
.mview__svg .lace-pin { fill: none; stroke: var(--steel); stroke-width: .8; }
.mview__svg .ctl { fill: #E9ECEE; stroke: var(--mv-line); stroke-width: .9; stroke-linejoin: round; }
.mview__svg .ctl-y { fill: var(--signal); stroke: none; }
.mview__svg .ctl-t { fill: var(--ink); font-family: var(--font-sans); font-weight: 800; letter-spacing: .06em; }
.mview__svg .vent { fill: none; stroke: var(--mv-line); stroke-width: .6; stroke-dasharray: 1 3; }
.mview__svg .pnl { fill: #EEF1F3; stroke: var(--mv-line); stroke-width: .9; }
.mview__svg .duct { fill: #B9C2C8; stroke: var(--mv-line); stroke-width: .5; }
.mview__svg .dev { fill: #FFFFFF; stroke: var(--mv-line); stroke-width: .5; }
.mview__svg .dev--plc { fill: #3E5966; }
.mview__svg .dev--psu { fill: #CFD6DA; }
.mview__svg .term { fill: #8FA0AA; stroke: none; }
.mview__svg .l--w { stroke: rgba(255,255,255,.5); }
.mview__svg .irv-h { fill: #1F8A3A; stroke: none; }
.mview__svg .irv-t { fill: #FFFFFF; font-family: var(--font-sans); font-weight: 700; }
.mview__svg .irv-v { fill: #D9DEE1; stroke: none; }
.mview__svg .irv-p { fill: #6E7B83; stroke: none; }
.mview__svg .irv-ok { fill: #6E7B83; stroke: #3DBE6E; stroke-width: 1.4; }
.mview__svg .irv-k { fill: #3DBE6E; font-family: var(--font-mono); font-weight: 600; }
.mview__svg .vg { fill: none; stroke: var(--mv-line); stroke-width: .8; stroke-dasharray: 4 4; stroke-opacity: .5; }
.mview__svg .mc-d { fill: var(--machine); fill-opacity: .6; stroke: var(--mv-line); stroke-width: .9; }
.mview__svg .mc-t { fill: var(--steel-soft); font-family: var(--font-sans); font-weight: 800; letter-spacing: .12em; }
.mview__svg .chip { fill: none; stroke: var(--brass-line); stroke-width: 1.3; stroke-linecap: round; }
.mview__svg .crate { fill: #3F7FB0; fill-opacity: .85; stroke: var(--mv-line); stroke-width: .8; }
.mview__svg .lamp--off { fill-opacity: .25; }
.mview__svg .opl { fill: none; stroke: var(--mv-line); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mview__svg .opv { fill: var(--signal); stroke: var(--mv-line); stroke-width: 1; stroke-linejoin: round; }
.mview__svg .oph { fill: #FFFFFF; stroke: var(--mv-line); stroke-width: 1.3; }
.mview__svg .opf { fill: none; stroke: var(--mv-line); stroke-width: 1; stroke-linecap: round; }
.mview__svg .opd { fill: var(--mv-line); }
/* the operator: white hard hat, Robsen blue jacket and sleeves, steel trousers, round white hands, thin lines */
.mview__svg .op-leg { fill: none; stroke: var(--steel); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mview__svg .op-shoe { fill: none; stroke: var(--steel); stroke-width: 2.6; stroke-linecap: round; }
.mview__svg .op-arm { fill: none; stroke: var(--blue); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mview__svg .op-hand { fill: #FFFFFF; stroke: var(--steel); stroke-width: .9; }
.mview__svg .op-jacket { fill: #6E9BF5; stroke: var(--blue); stroke-width: .8; stroke-linejoin: round; }
.mview__svg .op-collar { fill: none; stroke: #FFFFFF; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.mview__svg .op-head, .mview__svg .op-hat { fill: #FFFFFF; stroke: var(--steel); stroke-width: 1; }
.mview__svg .op-brim { fill: none; stroke: var(--steel); stroke-width: 1.4; stroke-linecap: round; }
.mview__svg .op-eye { fill: var(--ink); }
.mview__svg .op-face { fill: none; stroke: var(--ink); stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; }
.mview__svg .op-tool { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.mview__svg .op-sweat { fill: #CFE0FF; stroke: var(--blue); stroke-width: .6; }
.mview__svg .heat { fill: none; stroke: #FF9A3D; stroke-width: 1.4; stroke-linecap: round; }
.mview__svg .fov { fill: none; stroke: #1FA84F; stroke-width: 1.1; stroke-dasharray: 4 3; }

/* surface finishing: a polished part, the cloth buff wheel, sparks off the grinding belt (hot, so orange) */
.mview__svg .shine { fill: #EFD893; stroke: var(--brass-line); stroke-width: 1; stroke-linejoin: round; }
.mview__svg .shine.l { fill: none; }
.mview__svg .buff { fill: #F4EFE6; stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
.mview__svg .spark { fill: none; stroke: #FF8A1F; stroke-width: 1.2; stroke-linecap: round; }

/* Plain line style (class "iso iso--line"), as simple as irocube.com's mounting drawings: soft grey lines a little
   heavier than the 1 px ink, white bodies, the machine light blue, the robot thin and yellow, dark petrol joint dots. */
.iso--line { --ln: rgba(11, 28, 38, .62); }
.iso--line .mview__svg .f, .iso--line .mview__svg .al, .iso--line .mview__svg .mc, .iso--line .mview__svg .dk,
.iso--line .mview__svg .rb, .iso--line .mview__svg .l { stroke: var(--ln); stroke-width: 1.5; }
.iso--line .mview__svg .al { fill: var(--mist); }
.iso--line .mview__svg .dk { fill: #8C9AA4; }
.iso--line .mview__svg .tube-o { stroke: var(--ln); }
.iso--line .mview__svg .jt { fill: #033D5B; }
.iso--line .mview__svg .grip { stroke-width: 1.8; }
.iso--line .mview__svg .belt-d { stroke-dasharray: 5 8; stroke-width: 1.3; }
.iso--line .mview__svg .floor { stroke-dasharray: 2 6; }
.iso--line .mview__svg .lamp-g { fill: #3DBE6E; stroke: var(--ln); stroke-width: 1.5; }
.iso--line .mview__svg .glass { fill-opacity: .22; stroke: none; }     /* see-through: its edges are drawn as lines */
.iso--line .mview__svg .belt-ln { fill: none; stroke: var(--steel); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.iso--line .mview__svg .cam-on { stroke: var(--blue); stroke-opacity: .8; }
.iso--line .mview__svg .cone { fill: var(--blue); fill-opacity: .12; stroke: none; }
/* assembly and packaging: cartons and separators in kraft, a part that failed a check ringed in amber (never red) */
.mview__svg .card { fill: #EADBBF; stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
.iso--line .mview__svg .card { stroke: var(--ln); stroke-width: 1.5; }
.iso--line .mview__svg .nok-ring { stroke: #E8962A; stroke-width: 2; }
.iso--line .mview__svg .cone--nok { fill: #E8962A; fill-opacity: .28; }

/* Fine lines (class "iso--fine", the factory): every line at about half its weight, as the drawing reads at 50 %, so a
   whole factory on one screen stays light. (Robot tubes keep their own width; their outline is model.lw.) */
.iso--fine .mview__svg :not(.tube-o, .tube-f) { stroke-width: .75; }
.iso--fine .mview__svg .grip { stroke-width: 1; }
.iso--fine .mview__svg .belt-ln { stroke-width: 1.4; }
.iso--fine .mview__svg .op-leg, .iso--fine .mview__svg .op-arm { stroke-width: 1.1; }
.iso--fine .mview__svg .op-shoe { stroke-width: 2; }
.iso--fine .mview__svg .op-hand, .iso--fine .mview__svg .op-face { stroke-width: .7; }
.iso--fine .mview__svg .op-jacket { stroke-width: .5; }
.iso--fine .mview__svg .op-brim { stroke-width: 1.1; }
.iso--fine .mview__svg .nok-ring { stroke-width: 1.4; }

/* the degating cell on the move: the air hose blue, the name on the cell's wall in ink */
.mview__svg .hose, .iso--line .mview__svg .hose { stroke: var(--blue); stroke-width: 1.6; }
.mview__svg .wm--ink { fill: var(--ink); font-weight: 700; letter-spacing: .02em; }
.mview__svg .op-board { fill: #FFFFFF; stroke: var(--ink); stroke-width: .9; }
.mview__svg .op--eng .op-jacket { fill: #FFFFFF; stroke: var(--steel); }
.mview__svg .op--worker .op-jacket { fill: #B9C5CD; stroke: var(--steel); }
/* the story drawing: the cell's inside lights, labels that keep their size on screen, the road */
.mview__svg .lite { fill: #FFF3C4; stroke: var(--ln, var(--ink)); stroke-width: 1; }
.mview__svg .cell-lit { fill: #FFE9A0; opacity: .5; }
.mview__svg .mv-tag rect { fill: var(--paper); stroke: var(--blue); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mview__svg .mv-tag text { font-family: var(--font-mono); fill: var(--ink); }
.mview__svg .mv-tag circle { fill: var(--blue); }
.mview__svg .mv-tag line { stroke: var(--blue); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mview__svg .mv-tag.is-off rect { stroke: var(--line-strong); }
.mview__svg .mv-tag.is-off text { fill: var(--steel-soft); }
.mview__svg .mv-tag.is-off circle, .mview__svg .mv-tag.is-off line { fill: var(--line-strong); stroke: var(--line-strong); }
.iso--line .mview__svg .road { fill: #E9EDF0; stroke: none; }
.iso--line .mview__svg .lane { stroke: #FFFFFF; stroke-width: 3; }
.iso--line .mview__svg .tree { fill: #DCE7DC; stroke: var(--ln); stroke-width: 1.2; }
.iso--line .mview__svg .wall { fill: #F4F6F7; stroke: var(--ln); stroke-width: 1.2; }
/* die casting (models/die-casting-by-hand.js): the quench tank's water, and the steam that bursts out of the sprayed die,
   one cloud: every puff's outline drawn under every puff's fill */
.mview__svg .water { fill: #CFE3F7; stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
.mview__svg .steam-o { fill: none; stroke: #A3AFB7; stroke-width: 2.4; }
.mview__svg .steam-f { fill: #FFFFFF; stroke: none; }