/* home TKB Monitor scene (monitor-scene.js): the TKB Monitor logo in the middle, the office's devices on plates around
   it, a star-particle line from each device into the logo, and the collector's alert e-mail when something fails.
   Same visual language as the MySorty scene (sort.js): dark plates, line icons, particle streams, squash and settle. */
.mscn{position:relative;width:100%;max-width:1180px;height:var(--mscn-h,540px);margin:0 auto;contain:layout}
.mscn-flow{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:1}

.mscn-core{position:absolute;left:0;top:0;z-index:3;width:var(--mscn-core,140px);transform-origin:50% 60%}
.mscn-core img{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.55));transition:filter 420ms cubic-bezier(.2,.8,.2,1)}
.mscn-core.is-red img{filter:drop-shadow(0 18px 30px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(240,82,74,.42))}

/* a device: the plate, its icon, its name as the dashboard shows it, its state */
.mscn-dev{position:absolute;left:0;top:0;z-index:2;display:flex;align-items:center;gap:11px;padding:9px 15px 9px 10px;border:1px solid rgba(240,243,241,.15);border-radius:12px;
  background:linear-gradient(180deg,rgba(38,42,46,.96),rgba(30,33,36,.96));box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 22px 40px -24px rgba(0,0,0,.9);
  white-space:nowrap;transform-origin:50% 60%;transition:border-color 212ms cubic-bezier(.2,.8,.2,1),background-color 212ms cubic-bezier(.2,.8,.2,1),opacity 420ms cubic-bezier(.2,.8,.2,1)}
.mscn-ic{display:block;width:30px;height:30px;flex:none}
.mscn-ic svg{display:block;width:100%;height:100%;overflow:visible}
.mscn-n{flex:1;color:var(--ink,#f0f3f1);font-size:14.5px;font-weight:500;letter-spacing:.005em}
.mscn-dot{position:relative;width:9px;height:9px;flex:none;border-radius:50%;background:#43c25b;box-shadow:0 0 0 3px rgba(67,194,91,.15),0 0 10px rgba(67,194,91,.5);
  transition:background-color 212ms cubic-bezier(.2,.8,.2,1),box-shadow 212ms cubic-bezier(.2,.8,.2,1)}
.mscn-dev.is-crit{border-color:rgba(240,82,74,.62);background:linear-gradient(180deg,rgba(64,34,33,.96),rgba(44,28,28,.96))}
.mscn-dev.is-crit .mscn-dot{background:#f0524a;box-shadow:0 0 0 3px rgba(240,82,74,.18),0 0 12px rgba(240,82,74,.7)}
.mscn-dev.is-crit .mi-s{stroke:#f6a39b}
/* the line icons, drawn like MySorty's inputs */
.mi-s{fill:#24282b;stroke:#d3dbd6;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;transition:stroke 212ms}
.mi-l{fill:none;stroke:#d3dbd6;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mi-g{fill:#43c25b}

/* the e-mail: an envelope that travels the line, then the message itself */
.mscn-env{position:absolute;left:0;top:0;z-index:5;width:46px;opacity:0;will-change:transform,opacity;filter:drop-shadow(0 8px 14px rgba(0,0,0,.5))}
.mscn-env svg{display:block;width:100%;height:auto;overflow:visible}
.me-flap{transform-box:fill-box;transform-origin:50% 0;transition:transform 160ms cubic-bezier(.3,0,.8,.15)}
/* once its flap opens, the envelope lies under the message that rises out of it */
.mscn-env.is-open{z-index:3}
.mscn-env.is-open .me-flap{transform:scaleY(-1);transition:transform var(--t-sp,431ms) var(--sp,cubic-bezier(.2,.8,.2,1))}
.mscn-mail{position:absolute;left:0;top:0;z-index:4;width:520px;opacity:0;transform-origin:50% 100%;pointer-events:none;backface-visibility:hidden;
  border-radius:10px;overflow:hidden;background:#fff;color:#16211a;box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 40px 70px -30px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.06)}
.mscn-mail .mm-h{padding:14px 16px 12px;border-bottom:1px solid #e3e8e4;font-family:"Segoe UI",Arial,sans-serif}
.mscn-mail .mm-s{font-size:16px;font-weight:600;line-height:1.3}
.mscn-mail .mm-f{margin-top:3px;font-size:12.5px;color:#5f6f64}
.mscn-mail .mm-b{padding:16px}
.mscn-mail a{color:#1a5fb4}

/* before the entrance: nothing but the empty stage */
.mscn:not(.is-built) :is(.mscn-core,.mscn-dev){opacity:0}
@media (max-width:760px){
  .mscn-dev{gap:7px;padding:7px 9px 7px 7px;border-radius:10px}
  .mscn-ic{width:22px;height:22px}
  .mscn-n{font-size:12px}
  .mscn-dot{width:7px;height:7px}
  .mscn-env{width:36px}
}
/* layouts where the e-mail opens over the scene: the office steps back while the message is open */
.mscn-flow,.mscn-core{transition:opacity 420ms cubic-bezier(.2,.8,.2,1)}
.mscn.is-over.is-mail :is(.mscn-flow,.mscn-core,.mscn-dev){opacity:.22}

/* the dashboard card the e-mail opens (its insides are the dashboard's own, in a shadow root), the hand that taps the
   link and its green ring */
.mscn-dash{position:absolute;left:0;top:0;z-index:4;width:520px;opacity:0;transform-origin:0 0;pointer-events:none;border-radius:10px;overflow:hidden;
  background:#0f1517;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 70px -30px rgba(0,0,0,.85)}
.mscn-hand{position:absolute;left:0;top:0;z-index:7;width:30px;opacity:0;pointer-events:none;transform-origin:48% 24%;filter:drop-shadow(0 4px 6px rgba(0,0,0,.45))}
.mscn-hand svg{display:block;width:100%;height:auto}
.mscn-ring{position:absolute;left:0;top:0;z-index:6;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;border:2px solid #43c25b;opacity:0;pointer-events:none}
@media (max-width:760px){.mscn-hand{width:26px}}