/* MTech RTU experience: one dominant scene, who-is-doing-what above it, the story below it, and the job record and coworkers beside it */
.rtu{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;align-items:start}
.rtu-main{min-width:0;display:flex;flex-direction:column;gap:10px}

/* the central idea, lit up as each part acts */
.rtu-roles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.rtu-roles li{border:1px solid var(--line2);border-top:3px solid var(--line);padding:8px 10px;min-width:0;transition:border-color .35s,background .35s}
.rtu-roles b{display:block;font:700 15px var(--f-display,Arial);font-variation-settings:"wdth" 100;line-height:1.2}
.rtu-roles span{display:block;font:400 12px/1.35 var(--f-mono,'IBM Plex Mono',monospace);color:var(--muted)}
.rtu-roles li.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.rtu-roles li.on b{color:var(--accent)}

/* the scene */
.rtu-stage{position:relative;aspect-ratio:16/9;max-height:70vh;min-height:300px;width:100%;overflow:hidden;background:#cfd8e2;border:1px solid var(--line);border-radius:14px}
.rtu-stage>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.rtu-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.rtu-chip{position:absolute;left:0;top:0;opacity:0;transition:opacity .35s;pointer-events:none;will-change:transform}
.rtu-chip>div{transform:translate(-50%,-100%);margin-top:-10px;background:rgba(10,16,22,.84);color:#f1ede4;border-left:3px solid #2dd4ff;padding:6px 10px;font:500 13px/1.35 'IBM Plex Sans',system-ui,sans-serif;white-space:nowrap;backdrop-filter:blur(4px)}
.rtu-chip b{display:block;font:600 10.5px 'IBM Plex Mono',monospace;letter-spacing:.09em;text-transform:uppercase;color:#2dd4ff}
.rtu-chip.warn>div{border-left-color:#ffb020}.rtu-chip.warn b{color:#ffb020}
.rtu-chip.ok>div{border-left-color:#3ddc97}.rtu-chip.ok b{color:#3ddc97}
.rtu-chip.l>div{transform:translate(0,-50%);margin:0 0 0 14px}
.rtu-chip.r>div{transform:translate(-100%,-50%);margin:0 0 0 -14px}
.rtu-sim{position:absolute;left:12px;top:12px;background:rgba(10,16,22,.7);color:#f1ede4;font:500 10.5px 'IBM Plex Mono',monospace;letter-spacing:.09em;text-transform:uppercase;padding:4px 8px;opacity:0;transition:opacity .4s}
.rtu-sim.on{opacity:1}
.rtu-lens{position:absolute;inset:10px;border-radius:26px;box-shadow:0 0 0 400px rgba(8,12,18,.38),inset 0 0 60px rgba(8,12,18,.35);border:1px solid rgba(241,237,228,.35);opacity:0;transition:opacity .6s;pointer-events:none}
.rtu-lens span{position:absolute;left:14px;top:12px;background:rgba(10,16,22,.78);color:#2dd4ff;font:600 11px 'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:6px}
.rtu-lens span::before{content:"";display:inline-block;width:12px;height:7px;border:1.5px solid #2dd4ff;border-radius:3px;margin-right:7px;vertical-align:0}
.rtu-lens.on{opacity:1}
.rtu-iot{position:absolute;right:14px;top:14px;width:min(250px,42%);background:rgba(10,16,22,.82);color:#f1ede4;border:1px solid rgba(241,237,228,.18);padding:9px 11px 8px;font:500 11.5px 'IBM Plex Mono',monospace;backdrop-filter:blur(4px);transition:border-color .3s,opacity .4s;opacity:0}
.rtu-iot.on{opacity:1}
.rtu-iot .t{display:flex;justify-content:space-between;gap:8px;letter-spacing:.08em;text-transform:uppercase;color:#9fb0bf;font-size:10px}
.rtu-iot .t b{color:#2dd4ff;font-weight:600}
.rtu-iot svg{display:block;width:100%;height:40px;margin:6px 0 4px}
.rtu-iot .band{fill:rgba(61,220,151,.12)}
.rtu-iot .ln2{fill:none;stroke:#2dd4ff;stroke-width:1.6;vector-effect:non-scaling-stroke}
.rtu-iot .row{display:flex;justify-content:space-between;gap:8px;padding-top:3px}
.rtu-iot .row i{font-style:normal;color:#9fb0bf}
.rtu-iot.alert{border-color:#ffb020}.rtu-iot.alert .t b{color:#ffb020}
.rtu-iot.ok{border-color:#3ddc97}.rtu-iot.ok .t b{color:#3ddc97}
.rtu-iot .al{color:#ffb020}.rtu-iot .gd{color:#3ddc97}
.rtu-instr{position:absolute;z-index:6;left:50%;top:48px;transform:translateX(-50%);background:#2dd4ff;color:#031e27;font:600 13px 'IBM Plex Mono',monospace;letter-spacing:.04em;padding:8px 13px;opacity:0;transition:opacity .3s,background .3s;max-width:calc(100% - 40px);text-align:center}
.rtu-instr.on{opacity:1}
.rtu-instr.ok{background:#3ddc97;color:#05271a}
.rtu-say{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);background:rgba(241,237,228,.95);color:#16181b;font:500 16px/1.35 'IBM Plex Sans',system-ui,sans-serif;padding:9px 15px;border-radius:16px 16px 16px 4px;opacity:0;transition:opacity .3s;max-width:80%;text-align:center}
.rtu-say::before{content:"The technician says";display:block;font:600 10px 'IBM Plex Mono',monospace;letter-spacing:.09em;text-transform:uppercase;color:#0088c2;margin-bottom:2px}
.rtu-say.on{opacity:1}
.rtu-shot{position:absolute;left:0;top:0;pointer-events:none;opacity:0;transition:opacity .25s}
.rtu-shot i{position:absolute;width:18px;height:18px;border:0 solid #f1ede4}
.rtu-shot .a{left:0;top:0;border-width:3px 0 0 3px}.rtu-shot .b{right:0;top:0;border-width:3px 3px 0 0}.rtu-shot .c{left:0;bottom:0;border-width:0 0 3px 3px}.rtu-shot .d{right:0;bottom:0;border-width:0 3px 3px 0}
.rtu-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
/* AI QC looking at the photo that was just taken */
.rtu-qc{position:absolute;z-index:5;left:14px;top:92px;width:min(250px,44%);background:rgba(10,16,22,.9);color:#f1ede4;border:1px solid rgba(241,237,228,.25);border-top:3px solid #2dd4ff;padding:9px 10px 10px;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s,border-color .3s;pointer-events:none}
.rtu-qc.on{opacity:1;transform:none}
.rtu-qc header{display:flex;justify-content:space-between;gap:8px;font:600 10.5px 'IBM Plex Mono',monospace;letter-spacing:.09em;text-transform:uppercase;margin-bottom:7px}
.rtu-qc header b{color:#2dd4ff}.rtu-qc header span{color:#9fb0bf;font-weight:500}
.rtu-qc canvas{display:block;width:100%;height:auto;border-radius:3px;background:#111}
.rtu-qc .w{margin:7px 0 4px;font:600 13px 'IBM Plex Sans',system-ui,sans-serif}
.rtu-qc ul{list-style:none;margin:0;padding:0;display:grid;gap:3px;font:400 12.5px 'IBM Plex Sans',system-ui,sans-serif}
.rtu-qc li::before{content:"○";display:inline-block;width:18px;color:#9fb0bf;font-family:'IBM Plex Mono',monospace}
.rtu-qc li.yes::before{content:"✓";color:#3ddc97}.rtu-qc li.no::before{content:"✗";color:#ffb020}.rtu-qc li.no{color:#ffb020}
.rtu-qc .s{margin:6px 0 0;font:500 11.5px 'IBM Plex Mono',monospace;color:#9fb0bf}
.rtu-qc .v{margin:5px 0 0;font:600 12px 'IBM Plex Mono',monospace;letter-spacing:.05em;text-transform:uppercase}
.rtu-qc.ok{border-top-color:#3ddc97}.rtu-qc.ok .v{color:#3ddc97}
.rtu-qc.bad{border-top-color:#ffb020}.rtu-qc.bad .v{color:#ffb020}
.rtu-toast{position:absolute;left:50%;bottom:22px;transform:translate(-50%,8px);background:rgba(10,16,22,.88);color:#f1ede4;border:1px solid #2dd4ff;font:600 13px 'IBM Plex Sans',system-ui,sans-serif;padding:8px 14px;border-radius:20px;opacity:0;transition:opacity .35s,transform .35s;pointer-events:none;white-space:nowrap}
.rtu-toast::after{content:" →";color:#2dd4ff}
.rtu-toast.on{opacity:1;transform:translate(-50%,0)}
/* the token that carries a result from where it happened to where it is recorded */
.rtu-token{position:absolute;left:0;top:0;z-index:30;pointer-events:none;background:#2dd4ff;color:#031e27;font:600 12px 'IBM Plex Mono',monospace;padding:6px 10px;border-radius:4px;box-shadow:0 6px 18px rgba(0,0,0,.25);white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis;opacity:0}
.rtu-token.on{opacity:1}

/* the story, always visible under the scene */
.rtu-story{border-left:3px solid var(--accent);padding:2px 0 2px 14px}
.rtu-story .n{display:block;font:500 11px var(--f-mono,'IBM Plex Mono',monospace);letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.rtu-story .pl{margin:0;font:700 clamp(19px,1.9vw,26px)/1.2 var(--f-display,Arial);font-variation-settings:"wdth" 100}
.rtu-story .sh{margin:6px 0 0;font-size:clamp(15px,1.2vw,17px);line-height:1.5;font-weight:300;max-width:70ch}
.rtu-ctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rtu-play{width:42px;height:42px;flex:0 0 42px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--fg);display:grid;place-items:center;cursor:pointer}
.rtu-play:hover{border-color:var(--accent)}
.rtu-play svg{width:16px;height:16px;fill:currentColor}
.rtu-chs{flex:1 1 360px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;list-style:none;margin:0;padding:0;min-width:0}
.rtu-chs button{width:100%;background:none;border:0;padding:0 0 4px;text-align:left;cursor:pointer;color:var(--muted);font:500 10.5px var(--f-mono,'IBM Plex Mono',monospace);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rtu-chs button::before{content:"";display:block;height:3px;background:linear-gradient(90deg,var(--accent) var(--p,0%),var(--line) var(--p,0%));margin-bottom:6px}
.rtu-chs button.on{color:var(--fg)}
.rtu-why{background:none;border:1px solid var(--line);color:var(--fg);padding:9px 12px;font:500 11.5px var(--f-mono,'IBM Plex Mono',monospace);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.rtu-why[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)}
.rtu-more{border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--bg2);padding:14px 16px;font-size:15.5px;line-height:1.55;font-weight:300}
.rtu-more b{display:block;font:500 11px var(--f-mono,'IBM Plex Mono',monospace);letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}

/* Job record and coworkers beside the scene */
.rtu-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.rtu-box{border:1px solid var(--line);background:var(--bg);min-width:0;display:flex;flex-direction:column;transition:opacity .4s,box-shadow .4s,border-color .4s}
.rtu-box>header{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line);font:600 11px var(--f-mono,'IBM Plex Mono',monospace);letter-spacing:.1em;text-transform:uppercase;background:var(--panel)}
.rtu-box>header b{color:var(--accent);font-weight:600}
.rtu-box>header i{font-style:normal;color:var(--muted);font-weight:500}
.rtu-record>header{flex-wrap:wrap;row-gap:2px}
.rtu-record>header b{flex:1 1 100%;min-width:0}
.rtu-record>header i{margin-left:auto}
.rtu-record dl{position:relative;margin:0;padding:4px 12px 6px}
.rtu-record dl div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px;padding:6px 0;border-bottom:1px solid var(--line2);transition:background .8s}
.rtu-record dl div:last-child{border-bottom:0}
.rtu-record dt{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font:500 10px var(--f-mono,'IBM Plex Mono',monospace);padding-top:3px}
.rtu-record dd{margin:0}
.rtu-record .v{display:block;font:500 13.5px/1.35 var(--f-body,'IBM Plex Sans',sans-serif);color:var(--fg)}
.rtu-record .src{display:block;font:400 10.5px/1.4 var(--f-mono,'IBM Plex Mono',monospace);color:var(--muted);margin-top:2px}
.rtu-record div.pending{display:none}
.rtu-record.open div.pending{display:grid;opacity:.45}
.rtu-record div.incoming{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.rtu-record div.incoming .v{color:var(--muted)}
.rtu-record div.new{background:color-mix(in srgb,var(--accent) 18%,transparent);animation:in .35s ease both}
.rtu-record div.new .src{color:var(--accent);font-weight:500}
.rtu-full{margin:0 12px 10px;background:none;border:1px dashed var(--line);color:var(--muted);padding:7px 10px;font:500 11px var(--f-mono,'IBM Plex Mono',monospace);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.rtu-full:hover{color:var(--fg);border-color:var(--fg)}
.rtu-cw ol{list-style:none;margin:0;padding:8px 12px 10px;display:grid;gap:8px;max-height:280px;overflow:hidden}
.rtu-cw li{font-size:13.5px;line-height:1.4;border-left:2px solid var(--accent);padding-left:9px;animation:in .35s ease both}
.rtu-cw li b{display:block;font:500 10px var(--f-mono,'IBM Plex Mono',monospace);letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.rtu-cw li.empty{border-left-color:var(--line);color:var(--muted);font:400 12px var(--f-mono,'IBM Plex Mono',monospace)}
/* whichever side panel is doing the work takes focus */
.rtu[data-focus="cw"] .rtu-cw{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 45%,transparent)}
.rtu[data-focus="cw"] .rtu-record{opacity:.55}
.rtu.nogl .rtu-stage{background:var(--bg2);display:grid;place-items:center}
@media(max-width:1000px){
  .rtu{grid-template-columns:1fr}
  .rtu-side{display:grid;grid-template-columns:1fr 1fr;align-items:start}
}
@media(max-width:640px){
  .rtu-roles{grid-template-columns:1fr 1fr}
  .rtu-roles li{padding:6px 8px}.rtu-roles b{font-size:13.5px}.rtu-roles span{font-size:11px}
  .rtu-stage{aspect-ratio:4/5;max-height:70vh}
  .rtu-side{grid-template-columns:1fr}
  .rtu-iot{width:auto;left:12px;right:12px;top:auto;bottom:12px;padding:7px 9px}
  .rtu-iot svg{height:26px}
  .rtu-instr{top:72px;font-size:12px}
  .rtu-lens span{font-size:10px;letter-spacing:.06em;right:14px;line-height:1.4}
  .rtu-say{bottom:16px;font-size:14.5px}
  .rtu-qc{left:50%;top:auto;bottom:12px;transform:translate(-50%,6px);width:min(250px,86%)}
  .rtu-qc.on{transform:translate(-50%,0)}
  .rtu-qc canvas{max-height:110px;object-fit:contain}
  .rtu-toast{white-space:normal;text-align:center;max-width:86%}
  .rtu-chip>div{font-size:12px;padding:5px 8px;white-space:normal;width:max-content;max-width:200px}
  .rtu-chip.l>div,.rtu-chip.r>div{transform:translate(-50%,-100%);margin:-10px 0 0}
  .rtu-chs{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:8px;flex:1 1 0}
  .rtu-chs button{min-height:40px;padding-bottom:10px}
  .rtu-full,.rtu-why{min-height:40px}
  .rtu-why{flex:1 1 100%}
}