/* the machine bezel around the (unchanged) operator screen */
html, body { height: 100%; margin: 0; overflow: hidden; background: #07060b; }
body { display: block !important; background: radial-gradient(1200px 700px at 50% 40%, #16121f, #07060b 70%) !important; }
#bezel { position: fixed; inset: 0; }
#screen { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; display: flex; flex-direction: column;
  background: var(--bg); overflow: hidden; border-radius: 4px; box-shadow: 0 0 0 10px #1b1822, 0 0 0 12px #2c2637, 0 30px 80px rgba(0,0,0,.8), 0 0 60px rgba(176,77,255,.12); }
#bezel-side { position: absolute; display: flex; flex-direction: column; justify-content: space-between; align-items: center; color: var(--dim); }
.bezel-brand { text-align: center; letter-spacing: 2px; }
.bb-main { display: block; font-weight: 800; font-size: 14px; color: var(--accent); text-shadow: 0 0 10px rgba(176,77,255,.6); }
.bb-sub { display: block; font-size: 9px; letter-spacing: 3px; margin-top: 4px; }
.bezel-controls { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.estop-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mushroom { width: 92px; height: 92px; border-radius: 50%; border: none; padding: 0; cursor: pointer; position: relative;
  background: radial-gradient(circle at 50% 50%, #f5d200 0 30%, #d9b800 31% 52%, #b89a00 53%); box-shadow: 0 6px 0 #6c5a00, 0 10px 22px rgba(0,0,0,.7); }
.mushroom-cap { position: absolute; left: 12px; top: 6px; width: 68px; height: 68px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #ff8a8a, #e01818 45%, #8a0a0a 100%); box-shadow: 0 8px 0 #5a0808, 0 12px 14px rgba(0,0,0,.6), inset 0 -6px 10px rgba(0,0,0,.35);
  transition: top .12s, box-shadow .12s; }
.mushroom.pressed .mushroom-cap { top: 13px; box-shadow: 0 2px 0 #5a0808, 0 4px 8px rgba(0,0,0,.6), inset 0 -4px 8px rgba(0,0,0,.35); }
.mushroom:hover .mushroom-cap { filter: brightness(1.1); }
.estop-label { font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-align: center; color: #e8e4f0; line-height: 1.25; }
.estop-state { font-size: 10px; font-weight: bold; letter-spacing: 1px; padding: 3px 8px; border-radius: 8px; background: #3a1010; color: #ff8080; border: 1px solid #802020; }
.estop-state.ok { background: #103a18; color: #8fe6a0; border-color: #2fbf4a; }
.bezel-row { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.bezel-btn { font: inherit; font-size: 12px; font-weight: bold; letter-spacing: 1px; color: var(--accent); background: var(--btn-grad); border: 1px solid var(--accent); border-radius: 6px;
  padding: 6px 10px; cursor: pointer; text-decoration: none; min-width: 84px; text-align: center; box-shadow: 0 0 8px rgba(176,77,255,.3); }
.bezel-btn:hover { color: var(--accent2); border-color: var(--accent2); }
body.narrow #bezel-side { flex-direction: row; justify-content: center; gap: 24px; }
body.narrow .bezel-brand { display: none; }
body.narrow .bezel-controls { flex-direction: row; gap: 16px; }
body.narrow .mushroom { width: 56px; height: 56px; } body.narrow .mushroom-cap { left: 8px; top: 3px; width: 40px; height: 40px; } body.narrow .mushroom.pressed .mushroom-cap { top: 8px; }
body.narrow .estop-label, body.narrow .estop-state { display: none; }
#fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.preview-wrap { position: relative; }
[hidden] { display: none !important; }
/* part complete */
.demo-done { position: fixed; inset: 0; z-index: 500; background: rgba(4,3,8,.72); display: flex; align-items: center; justify-content: center; font: 14px/1.35 var(--font); color: var(--text); }
.demo-done-box { width: min(560px, 92vw); background: linear-gradient(var(--panel2), var(--panel)); border: 2px solid var(--accent); border-radius: 10px; box-shadow: 0 0 40px rgba(176,77,255,.35), 0 30px 80px rgba(0,0,0,.8); }
.demo-done-title { background: var(--accent); color: #fff; font-weight: 800; letter-spacing: 2px; padding: 10px 16px; border-radius: 8px 8px 0 0; font-size: 18px; }
.demo-done-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.demo-done-body .job-line { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--alt); padding: 4px 0; }
.demo-done-body .hint { color: var(--dim); margin: 6px 0 0; }
.demo-done-btns { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 16px 16px; }
.demo-done-btns .btn { flex: 1; min-width: 160px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-size: 14px; }
.demo-gate { position: fixed; inset: 0; z-index: 700; background: radial-gradient(800px 500px at 50% 30%, #1a1426, #07060b 75%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 28px; text-align: center; font: 15px/1.45 var(--font); color: var(--dim); }
.demo-gate .brand { flex-direction: column; align-items: center; gap: 4px; } .demo-gate .brand-main { font-size: 28px; }
.gate-title { color: #ffd23a; font-weight: 800; letter-spacing: 2px; font-size: 16px; text-shadow: 0 0 12px rgba(255,210,58,.6); }
.demo-gate p { max-width: 420px; margin: 0; }
.demo-gate .btn { text-decoration: none; padding: 12px 22px; font-size: 14px; display: inline-flex; align-items: center; }
body.gated #bezel { display: none; }
/* the product screen's dev-only row (removed before production there) has no place in the demo */
.io-row:has(#skip-ihs) { display: none !important; }
/* preview mode (the landing page's hero): no safety sheet, no bezel controls */
body.preview #safety, body.preview #bezel-side { display: none !important; }
/* SETTINGS: the warranty pill and its dates stay, the lock / unlock and revert buttons do not exist in the demo */
#warranty-bar .btn { display: none !important; }
/* attention: the TUTORIAL button on load, and the arrow on the pressed E-stop */
@keyframes demo-glow { 0%, 100% { box-shadow: 0 0 10px rgba(176,77,255,.5), inset 0 1px 0 rgba(255,255,255,.08); } 50% { box-shadow: 0 0 26px #dcb3ff, 0 0 46px rgba(176,77,255,.9), inset 0 1px 0 rgba(255,255,255,.3); border-color: #fff; } }
.btn.demo-glow { animation: demo-glow 1.1s ease-in-out infinite; }
@keyframes demo-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
.estop-callout { position: absolute; right: 118px; top: 22px; display: flex; align-items: center; gap: 8px; white-space: nowrap; color: #ffd23a; font-weight: 800; font-size: 12px; letter-spacing: 1.5px; line-height: 1.2; text-align: right;
  text-shadow: 0 0 10px rgba(255,210,58,.7); animation: demo-nudge .9s ease-in-out infinite; pointer-events: none; }
.estop-callout i { font-style: normal; font-size: 26px; color: #ffd23a; }
.estop-wrap { position: relative; }
body.narrow .estop-callout { right: 66px; top: 8px; font-size: 10px; letter-spacing: 1px; gap: 5px; }
body.narrow .estop-callout i { font-size: 18px; }