/* One viewport contains the model, its explanation and the three primary actions. */
.sim-options{display:contents}
.welcome-product-link,.loading-product-link{pointer-events:auto;display:inline-flex;align-items:center;min-height:44px;color:var(--lime);font-size:15px;text-decoration:underline;text-underline-offset:4px}
.welcome-product-link[hidden],.loading-product-link[hidden]{display:none}
.activity-error{position:fixed;z-index:105;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));max-width:560px;margin:auto;padding:18px;border:1px solid #d3b987;background:#172a30;border-radius:14px;box-shadow:0 6px 40px #0008}
.activity-error[hidden]{display:none}.activity-error p{font-size:17px;line-height:1.5;margin:0 0 12px;color:#f3eee1}.activity-error>div{display:flex;gap:10px}.activity-error button{min-height:48px;flex:1}
.compact-phone .topbar{min-height:0!important;padding:6px 10px!important;gap:4px!important;position:sticky;top:0;z-index:30}
.compact-phone .topbar .brand{width:108px;min-height:44px}.compact-phone .topbar .brand-logo{width:108px}
.compact-phone .top-actions{gap:6px}.compact-phone #mobile-tools-button{min-height:44px;padding:8px 10px;font-size:14px}
.compact-phone .main-tabs{margin:0;min-height:0;gap:2px}
.compact-phone .main-tabs button{height:44px!important;min-height:44px;line-height:1.15;font-size:14px!important;padding:2px 5px!important}
.compact-phone .main-tabs button:after{bottom:0}
.compact-phone:not(.landing) .stage{height:clamp(350px,65svh,610px);min-height:0;flex-shrink:0}
.compact-phone .stage-header{top:10px;left:12px;right:12px}
.compact-phone .stage-header h2{font-size:20px;line-height:1.2;margin:4px 0}
.compact-phone .stage-header .eyebrow{font-size:11px}.compact-phone .stage-subtitle{font-size:13px}
.compact-phone.advanced-open .left-panel{top:var(--toolbar-height);width:100%;max-height:calc(100dvh - var(--toolbar-height));padding:16px}
.compact-phone .left-panel .panel-top{display:none}
.compact-phone .right-panel{padding:20px 16px;max-height:none}
.compact-phone.kids-catalogue .right-panel>.right-panel-head,.compact-phone.kids-catalogue #detail-content>.detail-description{display:none}
.compact-phone .simulation-card{min-height:96px;margin-bottom:10px}.compact-phone .simulation-card strong{font-size:19px}
.compact-phone .simulation-card small{font-size:14px;line-height:1.35}
.compact-phone .expedition-card .simulation-card-icon,.compact-phone .expedition-card .simulation-card-icon svg{width:46px;height:46px}
.compact-phone .detail-title{font-size:26px;margin:10px 0}.compact-phone .audience-switch{margin-bottom:12px}
.compact-phone.simulation-active #stage{display:flex;flex-direction:column;height:calc(100svh - var(--toolbar-height))!important;min-height:0!important;--sim-model-height:auto}
.compact-phone.simulation-active #canvas-host{position:relative;inset:auto;flex:1 1 0;width:100%;height:auto;min-height:160px}
.compact-phone.simulation-active .simulation-controls{position:relative;inset:auto;flex:0 0 auto;grid-template-columns:minmax(0,1fr);grid-template-areas:"caption" "progress" "transport";gap:3px;margin:0 8px 8px;width:calc(100% - 16px);padding:10px;max-width:none;border-radius:12px;box-shadow:none}
.compact-phone #simulation-caption{align-self:stretch;max-height:min(240px,max(80px,calc(100svh - var(--toolbar-height) - 300px)));overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.compact-phone #simulation-reading .detail-tag{font-size:12px;line-height:1.3}
.compact-phone #simulation-reading .detail-title{font-size:20px;line-height:1.2;margin:3px 0 6px}
.compact-phone #simulation-reading .detail-description{font-size:16px;line-height:1.4;margin:0}
.compact-phone #sim-progress{height:44px}
.compact-phone .sim-transport{display:flex;flex-wrap:nowrap;gap:6px}
.compact-phone .sim-transport button{height:44px;min-width:44px;width:auto}
.compact-phone #sim-play{min-width:0;flex:1;padding:0 8px;gap:5px;font-size:15px}
.compact-phone #sim-play span{display:inline}
.compact-phone #sim-options{display:none}.compact-phone.simulation-active #model-tools-dialog #sim-options{display:flex;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid #486068}
.compact-phone #model-tools-dialog #sim-options button,.compact-phone #model-tools-dialog #sim-options select{flex:1;height:48px;min-width:48px;display:flex;justify-content:center;align-items:center;border:1px solid #658b80;background:#223b42;color:#edf2ee;border-radius:8px;font-size:16px}
.compact-phone #model-tools-dialog #sim-options svg{width:22px;height:22px}
.compact-phone #model-tools-dialog #simulation-audience{grid-column:1/-1}
.compact-phone.simulation-active #model-tools-dialog #audience-mode{display:none}
.compact-phone #model-tools-session .demo-product-link{grid-column:1/-1;justify-content:center;font-size:16px}
.compact-phone #model-tools-dialog #simulation-audience:empty{display:none}
.compact-phone .simulation-active #mobile-detail-link{display:none}
.compact-phone.mobile-tools-open .stage,.compact-phone.mobile-tools-open.kids-mode .stage{position:fixed;z-index:20;top:var(--toolbar-height);left:0;right:0;bottom:var(--mobile-sheet-height);height:auto!important;min-height:0!important;width:100%;background:#0c151a}
.compact-phone.mobile-tools-open #canvas-host{position:absolute;inset:0;width:100%;height:100%!important;min-height:0}
.compact-phone.mobile-tools-open .simulation-controls{display:none!important}
.compact-phone.mobile-tools-open .stage-header .eyebrow,.compact-phone.mobile-tools-open .stage-subtitle{display:none}
/* Landscape phones keep the explanation alongside the model, with fixed transport below it. */
.compact-landscape .topbar{flex-wrap:nowrap;min-height:56px!important;padding:4px 10px!important;gap:10px!important}
.compact-landscape .main-tabs{order:0;flex:1;width:auto}.compact-landscape .main-tabs button{white-space:nowrap}
.compact-landscape .workspace,.compact-landscape.advanced-open .workspace,.compact-landscape.kids-mode .workspace{display:flex;flex-direction:column}
.compact-landscape:not(.landing) .stage{height:calc(100svh - var(--toolbar-height));min-height:240px}
.compact-landscape .stage-header .eyebrow,.compact-landscape .stage-subtitle{display:none}
.compact-landscape.simulation-active #stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,44%);grid-template-rows:minmax(0,1fr);height:calc(100svh - var(--toolbar-height))!important;min-height:260px!important}
.compact-landscape.simulation-active #canvas-host{grid-column:1;grid-row:1;position:relative;inset:auto;width:100%;height:100%;min-height:0}
.compact-landscape.simulation-active .stage-header{right:calc(44% + 12px)}
.compact-landscape.simulation-active .simulation-controls{grid-column:2;grid-row:1;display:grid;grid-template-rows:minmax(0,1fr) 44px 44px;align-self:stretch;margin:8px 8px 8px 0;width:auto;min-height:0;overflow:hidden}
.compact-landscape #simulation-caption{max-height:none;min-height:0;align-self:stretch}
.compact-landscape #simulation-reading .detail-title{font-size:19px}.compact-landscape #simulation-reading .detail-description{font-size:16px}
.compact-landscape .canvas-hint{bottom:8px}.compact-landscape #mobile-detail-link{bottom:8px;right:auto;left:12px}
.compact-landscape #model-tools-dialog{inset:var(--toolbar-height) 0 0 auto;width:44%;height:auto;border-radius:12px 0 0 0}
.compact-landscape.mobile-tools-open .stage,.compact-landscape.mobile-tools-open.kids-mode .stage{left:0;right:44%;width:56%;bottom:0;display:block!important}
.compact-landscape.mobile-tools-open .stage-header{right:12px}
.compact-landscape #model-tools-dialog .view-buttons{grid-template-columns:1fr 1fr!important}
