:root{color-scheme:dark;--bg:#0b1423;--panel:#142238;--border:#2a3b55;--muted:#a8bbd3;--text:#edf4ff;--blue:#5da7ff}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 0,#203959,var(--bg) 65%);color:var(--text);font:16px system-ui,Tahoma,sans-serif}header,main,footer{max-width:1800px;margin:auto;padding:22px 30px}header{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--border)}h1{margin:8px 0 0;font-size:30px}h1 span{font-weight:400;font-size:19px;color:var(--muted)}h2{font-size:19px;margin:0 0 12px}p{margin:6px 0;color:var(--muted)}a{color:#91c6ff;text-decoration:none}button{font:inherit;color:var(--text);background:#223a58;border:1px solid #48617c;border-radius:9px;padding:9px 14px;cursor:pointer}button:hover{background:#304e72}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px}button[aria-pressed=true]{background:#245fa4;border-color:var(--blue)}button:disabled{opacity:.55;cursor:wait}.toolbar{display:flex;flex-wrap:wrap;gap:9px;align-items:center}#clock{color:var(--muted);font-variant-numeric:tabular-nums}#connection{padding:12px 15px;margin-bottom:18px;background:#192c42;border-radius:10px;border-left:4px solid var(--blue)}#connection.error{background:#3d2630;border-color:#ffb068}#connection.demo{background:#3a321e;border-color:#eec458}.summary{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;margin-bottom:22px}.metric,.panel,.visual{background:var(--panel);border:1px solid var(--border);border-radius:14px}.metric{padding:15px;border-top:4px solid var(--tone,var(--blue))}.metric strong{display:block;font-size:clamp(24px,3vw,40px);margin-top:8px;font-variant-numeric:tabular-nums}.metric span{color:var(--muted)}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:20px}.visual{padding:20px;min-width:0}.section-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.section-head p{font-size:14px}#scene{height:440px;position:relative;margin-top:10px;border-radius:12px;background:linear-gradient(#172941,#101c2d);overflow:hidden}#scene canvas{display:block;width:100%;height:100%}#render-status,.note{font-size:13px;color:var(--muted);margin-top:12px}.zones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}.zone{min-width:0;text-align:left;padding:16px;background:#1c304b}.zone .count{display:block;font-size:30px;margin:6px 0;font-variant-numeric:tabular-nums}.zone .mini{display:flex;gap:6px;flex-wrap:wrap}.mini span{font-size:12px;border-left:4px solid var(--tone);padding-left:4px}aside .panel{margin-bottom:16px}.panel{padding:20px;margin-top:0;margin-bottom:20px}.detail-row,.alert-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums}.detail-row .mesi{border-left:5px solid var(--tone);padding-left:9px}.alert-row.active{color:#ffbdbd}.detail-total{font-size:36px;font-variant-numeric:tabular-nums;margin-bottom:10px}.crowd-value{font-size:36px;font-variant-numeric:tabular-nums}.crowd-label{color:#ffc780;margin:8px 0}.fast-track{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}.fast-item{background:#1d3049;padding:14px;border-radius:9px}.fast-item.active{background:#452b36;border-left:4px solid #f45492}.fast-item strong{display:block;font-size:28px;margin-top:9px;font-variant-numeric:tabular-nums}.bottom{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.refer{display:flex;gap:12px}.refer .metric{flex:1}iframe{width:100%;height:260px;border:0;margin:12px 0;background:#fff}summary{cursor:pointer;padding:8px 0}footer{color:var(--muted);font-size:13px}.view-2d #scene{display:none}.view-2d .zones{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:28px}.view-2d #render-status{display:none}@media(min-width:1500px){#scene{height:510px}}@media(max-width:1100px){.summary{grid-template-columns:repeat(4,1fr)}.workspace{grid-template-columns:1fr}aside{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.fast-track{grid-template-columns:repeat(4,1fr)}}@media(max-width:650px){header,main,footer{padding:16px}header{align-items:flex-start;flex-direction:column}.summary{grid-template-columns:repeat(2,1fr)}.zones,.view-2d .zones{grid-template-columns:repeat(2,minmax(0,1fr))}aside,.bottom{display:grid;grid-template-columns:1fr}.fast-track{grid-template-columns:repeat(2,1fr)}#scene{height:300px}.visual,.panel{padding:15px}.refer{flex-wrap:wrap}h1 span{display:block;margin-top:4px}.toolbar button{min-height:44px}}
:root{--tv-scale:1;--tv-left:0px;--tv-top:0px}
body.tv-mode{overflow:hidden;height:100vh;width:100vw;background:#0b1423}
.tv-mode #tv-screen{position:absolute;left:var(--tv-left);top:var(--tv-top);width:1920px;height:1080px;transform:scale(var(--tv-scale));transform-origin:top left;background:radial-gradient(ellipse at 50% 0,#203959,#0b1423 65%);display:grid;grid-template-rows:76px 980px 24px}
.tv-mode header,.tv-mode main,.tv-mode footer{max-width:none;margin:0;width:100%}
.tv-mode header{padding:8px 24px;flex-direction:row;align-items:center}
.tv-mode header a{font-size:12px}.tv-mode h1{font-size:28px;margin:3px 0}.tv-mode h1 span{display:inline;font-size:18px}
.tv-mode main{padding:16px 24px;display:grid;grid-template-rows:36px 90px 500px 120px 154px;gap:12px}
.tv-mode #connection{margin:0;padding:7px 12px;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-mode .summary{grid-template-columns:repeat(7,minmax(0,1fr));margin:0;gap:12px}
.tv-mode .metric{padding:9px 14px}.tv-mode .metric strong{font-size:36px;margin:2px 0}.tv-mode .metric span{font-size:17px}
.tv-mode .workspace{grid-template-columns:minmax(0,1fr) 350px;gap:12px;min-height:0}
.tv-mode .visual{padding:12px 16px;display:grid;grid-template-rows:44px 262px 21px 110px 19px;gap:4px;min-height:0}
.tv-mode h2{font-size:19px;margin:0 0 6px}.tv-mode .section-head p{font-size:13px;margin:0}.tv-mode #scene{height:262px;margin:0}
.tv-mode #render-status{font-size:12px;margin:0;line-height:21px}
.tv-mode .zones{grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin:0}
.tv-mode .zone{padding:8px 10px;min-height:0}.tv-mode .zone>span:first-child{font-size:17px}.tv-mode .zone .count{font-size:26px;margin:3px 0}.tv-mode .zone .mini{gap:4px}.tv-mode .mini span{font-size:12px}.tv-mode .note{font-size:12px;margin:0;line-height:19px}
.tv-mode aside{display:grid;grid-template-columns:1fr;grid-template-rows:226px 110px 140px;gap:12px;min-height:0}
.tv-mode .panel{padding:10px 14px;margin:0;min-width:0;min-height:0}
.tv-mode .detail-total{font-size:28px;margin:0}.tv-mode .detail-row{padding:6px 0;font-size:16px}.tv-mode #detail .detail-row{padding:4px 0}
.tv-mode .crowd-value{display:inline;font-size:28px}.tv-mode .crowd-label{display:inline;margin-left:14px;font-size:18px}.tv-mode #crowding .note{font-size:12px;margin-top:4px}
.tv-mode .alert-row{padding:3px 0;font-size:15px}.tv-mode aside .panel:last-child .note{font-size:11px;line-height:15px;margin-top:3px}
.tv-mode .fast-track{grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}.tv-mode .fast-item{padding:8px 12px}.tv-mode .fast-item strong{font-size:28px;margin:2px 0}
.tv-mode .bottom{grid-template-columns:1fr 1fr 1.15fr;gap:12px;min-height:0}
.tv-mode .refer{gap:12px;flex-wrap:nowrap}.tv-mode .refer .metric{padding:7px 14px}.tv-mode .refer .metric strong{font-size:34px}
.tv-mode .bottom .panel:last-child{position:relative;padding-right:225px}
.tv-mode .bottom details{position:absolute;right:10px;top:8px;width:210px;height:134px;overflow:hidden}.tv-mode .bottom summary{font-size:12px;padding:0;list-style:none;pointer-events:none}
.tv-mode iframe{width:500px;height:260px;transform:scale(.42);transform-origin:top left;margin:3px 0;display:block}
.tv-mode footer{padding:2px 24px;font-size:12px;line-height:20px}
.tv-mode.view-2d .visual{grid-template-rows:44px 1fr 19px;gap:8px}
.tv-mode.view-2d .zones{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,1fr);margin:0}
.tv-mode.view-2d .zone .count{font-size:40px}.tv-mode.view-2d .zone .mini span{font-size:17px}
/* In 3D, the scene owns the status overview; cards are only for 2D. */
body:not(.view-2d) .zones{display:none}
.tv-mode:not(.view-2d) .visual{grid-template-rows:44px minmax(0,1fr) 21px 19px;gap:4px}
.tv-mode:not(.view-2d) #scene{height:100%;min-height:0}

/* v1.4: give the patient models more screen space. */
body:not(.tv-mode) #scene{height:560px}
.tv-mode main{grid-template-rows:36px 80px 568px 96px 120px}
.tv-mode aside{grid-template-rows:254px 110px 180px}
.tv-mode .fast-item{padding:5px 12px}
.tv-mode .fast-item strong{font-size:26px;margin:0}
.tv-mode .bottom details{width:160px;height:100px}
.tv-mode .bottom .panel:last-child{padding-right:175px}
.tv-mode iframe{transform:scale(.32)}
.tv-mode .refer .metric{padding:4px 14px}
.tv-mode .refer .metric strong{font-size:30px}
.tv-mode #detail .detail-row{padding:6px 0;font-size:18px}
.tv-mode .alert-row{padding:6px 0;font-size:17px}

.zone-tooltip{position:absolute;z-index:10;min-width:210px;max-width:280px;padding:12px 15px;background:#10263f;color:#edf4ff;border:1px solid #5da7ff;border-radius:10px;box-shadow:0 8px 28px #0008;pointer-events:none;font-size:16px}
.zone-tooltip[hidden]{display:none}.zone-tooltip strong{font-size:19px}.tooltip-total{font-size:25px;margin:4px 0 8px}.tooltip-row{display:flex;justify-content:space-between;gap:20px;padding:3px 0}
.sr-scene-buttons{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* v1.5.1: larger ER room on TV, with the full dashboard retained. */
.tv-mode main{grid-template-rows:36px 74px 612px 88px 90px}
.tv-mode aside{grid-template-rows:278px 122px 188px}
.tv-mode .fast-item{padding:3px 12px}.tv-mode .fast-item strong{font-size:24px}
.tv-mode .bottom .panel{padding:6px 12px}
.tv-mode .bottom h2{font-size:17px;margin-bottom:3px}
.tv-mode .refer .metric{padding:2px 12px;border-top-width:3px}
.tv-mode .refer .metric span{font-size:14px}.tv-mode .refer .metric strong{font-size:26px}
.tv-mode .bottom .detail-row{padding:3px 0;font-size:15px}
.tv-mode .bottom details{top:4px;width:130px;height:82px}
.tv-mode .bottom .panel:last-child{padding-right:145px}
.tv-mode iframe{transform:scale(.26)}
body:not(.tv-mode) #scene{height:640px}

/* v1.6.1: remove overview captions and reclaim their space. */
#render-status[hidden]{display:none}
.tv-mode:not(.view-2d) .visual{grid-template-rows:44px minmax(0,1fr);gap:4px}
.tv-mode.view-2d .visual{grid-template-rows:44px minmax(0,1fr);gap:8px}

/* v1.6.4: enlarge the ER viewport while preserving TV screen fit. */
.tv-mode main{grid-template-rows:32px 68px 644px 80px 76px}
.tv-mode aside{grid-template-rows:298px 126px 196px}
.tv-mode .summary .metric{padding:5px 14px}
.tv-mode .summary .metric strong{font-size:32px}
.tv-mode .bottom .panel{padding:3px 12px}
.tv-mode .bottom h2{font-size:16px;margin-bottom:2px}
.tv-mode .refer .metric{padding:1px 12px}
.tv-mode .refer .metric strong{font-size:23px}
.tv-mode .bottom .detail-row{padding:1px 0;font-size:14px}
.tv-mode .bottom details{width:110px;height:69px;top:2px}
.tv-mode .bottom .panel:last-child{padding-right:125px}
.tv-mode iframe{transform:scale(.22)}
.tv-mode .fast-item{padding:1px 12px}
.tv-mode .fast-item strong{font-size:22px}
body:not(.tv-mode) #scene{height:700px}

#scene{background:#d3e1e3}

/* v1.8.4: bottom row contains Trauma and ER Monitor only. */
.bottom,.tv-mode .bottom{grid-template-columns:1fr 1.15fr}
@media(max-width:650px){body:not(.tv-mode) .bottom{grid-template-columns:1fr}}

.bottom,.tv-mode .bottom{grid-template-columns:minmax(0,1fr)}

/* v1.8.6: remove the bottom row and give its space to the 3D scene. */
.tv-mode main{grid-template-rows:32px 68px 732px 80px;gap:12px}
.tv-mode aside{grid-template-rows:346px 142px 220px}

#connection[hidden]{display:none}
.tv-mode main:has(#connection[hidden]){grid-template-rows:68px 776px 80px}
.tv-mode main:has(#connection[hidden]) aside{grid-template-rows:366px 154px 232px}

/* v1.8.9: remove footer row and expand the overview. */
.tv-mode #tv-screen{grid-template-rows:76px 1004px}
.tv-mode main{grid-template-rows:32px 68px 756px 80px}
.tv-mode aside{grid-template-rows:356px 148px 228px}
.tv-mode main:has(#connection[hidden]){grid-template-rows:68px 800px 80px}
.tv-mode main:has(#connection[hidden]) aside{grid-template-rows:376px 160px 240px}

/* v1.9: leave enough height for Patient Count and Fast Track. */
.tv-mode main{grid-template-rows:32px 90px 694px 120px}
.tv-mode aside{grid-template-rows:320px 142px 208px}
.tv-mode main:has(#connection[hidden]){grid-template-rows:90px 738px 120px}
.tv-mode main:has(#connection[hidden]) aside{grid-template-rows:340px 150px 224px}
.tv-mode .summary .metric{padding:10px 14px}
.tv-mode .summary .metric strong{font-size:36px;margin-top:4px}
.tv-mode .fast-item{padding:9px 12px}
.tv-mode .fast-item strong{font-size:28px;margin-top:5px}

/* v1.9.1: add 30px to both Patient Count and Fast Track. */
.tv-mode main{grid-template-rows:32px 120px 634px 150px}
.tv-mode aside{grid-template-rows:290px 130px 190px}
.tv-mode main:has(#connection[hidden]){grid-template-rows:120px 678px 150px}
.tv-mode main:has(#connection[hidden]) aside{grid-template-rows:310px 140px 204px}
