/* Logical canvas rules. No viewport-based type sizes or responsive breakpoints.
   Only SignageRenderer transforms this entire canvas into the physical viewport. */
body[data-view=display],body[data-view=preview]{height:100vh;width:100vw;overflow:hidden;background:#132936}
#signage-stage{position:fixed;inset:0;overflow:hidden;background:#132936}
#signage-canvas{position:absolute;left:0;top:0;transform-origin:0 0;display:flex;flex-direction:column;background:#f2f6f8;color:#203744;width:1920px;height:1080px;overflow:hidden;padding:var(--safe-area,48px);--grid-gap:20px;--card-padding:24px;--name-font:36px;--name-height:90px;--status-font:36px}
body #signage-canvas .top{flex:0 0 84px;height:84px;min-height:0;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:24px;padding:0 0 24px;background:transparent;border-bottom:1px solid #cbdbe3}
#signage-canvas .brand{font-size:25px;letter-spacing:.1em}#signage-canvas .brand small{font-size:14px}#signage-canvas .top p{font-size:18px;margin:4px 0 0}
body #signage-canvas main{width:100%;height:auto;min-height:0;max-width:none;margin:0;padding:26px 0 0;flex:1;display:flex;flex-direction:column;overflow:hidden}
body #signage-canvas .heading{height:146px;min-height:146px;flex:none;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:28px;margin:0 0 24px}
#signage-canvas .heading>div:first-child{min-width:0;flex:1}#signage-canvas .heading h1{font-size:52px;line-height:1.2;margin:8px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#signage-canvas .heading p{font-size:22px;margin:5px 0}#signage-canvas .heading .eyebrow{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#signage-canvas .sync{font-size:19px;gap:10px;flex:0 0 auto;max-width:600px;width:auto;justify-content:flex-end}#signage-canvas .live-dot{width:10px;height:10px}
body #signage-canvas .area-grid{flex:1;min-height:0;display:grid;gap:var(--grid-gap);grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));overflow:hidden}
body #signage-canvas .area-card{display:flex;flex-direction:column;justify-content:center;padding:var(--card-padding);min-height:0;min-width:0;border-radius:14px;border:1px solid #cfdfe7;border-top:5px solid #a9c1cf;overflow:hidden}
body #signage-canvas .card-top{display:flex;align-items:center;gap:12px;min-height:0}body #signage-canvas .area-card h2{margin:0;font-size:var(--name-font);line-height:1.22;height:var(--name-height);max-height:var(--name-height);min-width:0;flex:1;overflow:hidden;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}#signage-canvas .area-number{font-size:18px;flex:none}
body #signage-canvas .status{font-size:var(--status-font);line-height:1.25;padding:14px 12px;margin:16px 0 12px;min-width:0;flex:none;max-height:35%;border-radius:10px;overflow:hidden}#signage-canvas .status>span:last-child{overflow:hidden;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:2.5em}#signage-canvas .status-dot{width:12px;height:12px}
body #signage-canvas .stamp{font-size:16px;margin:8px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none}
body #signage-canvas footer{font-size:18px;padding:18px 0 0;flex:0 0 48px;height:48px;min-height:48px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#signage-clock{font-variant-numeric:tabular-nums;font-size:28px;font-weight:700;color:#466572}#signage-clock[hidden],#signage-logo[hidden],#signage-qr[hidden]{display:none}
#signage-canvas .top>div:first-child{min-width:0;flex:1}#signage-canvas .top p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#signage-qr{flex:0 0 60px;width:60px;height:60px;overflow:hidden}#signage-qr img,#signage-qr svg,#signage-qr canvas{max-width:100%;max-height:100%}
#signage-canvas[data-dense=true] .area-number{font-size:12px}#signage-canvas[data-dense=true] .stamp{font-size:12px;margin-top:2px}#signage-canvas[data-dense=true] .status{margin:8px 0 4px;padding:8px}#signage-canvas[data-dense=true] .area-card{border-top-width:3px}
#signage-canvas[data-dense=true] .status{padding:4px 6px;max-height:43%}
.preview-toolbar{position:fixed;top:0;left:0;right:0;min-height:82px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;background:#fff;padding:12px 20px;z-index:20;color:#203744;font-size:13px}.preview-toolbar label{display:flex;align-items:center;gap:8px;font-size:13px}.preview-toolbar select{font:inherit;min-height:42px;padding:8px;border:1px solid #b7c9d2;border-radius:7px}.preview-toolbar span{font-size:12px;color:#617986}#preview-host{position:fixed;inset:98px 16px 16px}#preview-host #signage-stage{position:absolute;inset:auto}#device-info{position:fixed;z-index:25;top:90px;right:22px;margin:0;padding:20px;background:#102936ed;color:#e7f5ff;border:1px solid #8baabb;border-radius:8px;font-size:13px;max-height:calc(100vh - 110px);overflow:auto;max-width:calc(100vw - 44px)}