/* Demo-mode boundary. This uses a dedicated asset path so returning browsers
 * cannot reuse the pre-banner demo.css response under an updated page shell. */
:root.ppDemoMode{--demo-banner-h:64px;--demo-banner-bg:#f6edda;--demo-banner-border:#c79a3b}
:root[data-theme="dark"].ppDemoMode{--demo-banner-bg:#2b261c;--demo-banner-border:#c79a3b}
html.ppDemoMode{scroll-padding-top:calc(var(--demo-banner-h) + var(--topnav-h) + 10px)}
.demoModeBar{
  position:sticky;top:0;z-index:35;flex:none;height:var(--demo-banner-h);padding:0;border-bottom:1px solid var(--demo-banner-border);
  background:var(--demo-banner-bg);color:var(--ink)
}
.demoModeBarIn{display:flex;align-items:center;justify-content:space-between;gap:18px;
  width:100%;height:100%;max-width:1400px;margin:0 auto;padding:10px 20px}
.ppDemoMode header.nav{top:var(--demo-banner-h)}
.ppDemoMode .wizTray,.ppDemoMode .backToAskBar,.ppDemoMode .pzTabs{
  top:calc(var(--demo-banner-h) + var(--topnav-h))
}
.demoModeMessage{display:grid;gap:2px;min-width:0}
.demoModeBar strong{font:850 14px/1.2 var(--ui)}
.demoModeBar span{font:550 12.5px/1.4 var(--ui);color:var(--text-2)}
.demoModeActions{display:flex;align-items:center;gap:8px;flex:none}
.demoModeActions .btn{min-height:44px;margin:0;padding:8px 14px;font-size:13px;white-space:nowrap}
.ppDemoMode .sidebarAccountBtn{cursor:default}
@media(max-width:640px){
  .demoModeBarIn{align-items:center;gap:8px;padding:8px 12px}
  .demoModeBar span{display:none}
  .demoModeActions{gap:5px}
  .demoModeActions .btn{padding:7px 9px;font-size:11.5px}
}