body.demoMode #report{position:relative;overflow:hidden}
body.demoMode #report::before{
  content:'DEMO PREVIEW';
  position:absolute;
  z-index:8;
  left:50%;
  top:48%;
  transform:translate(-50%,-50%) rotate(-28deg);
  font-size:clamp(36px,8vw,92px);
  font-weight:950;
  letter-spacing:.08em;
  color:rgba(8,127,132,.10);
  white-space:nowrap;
  pointer-events:none
}
.demoNotice{
  position:relative;
  z-index:35;
  background:#07131c;
  color:#dffdfa;
  border-bottom:1px solid #28404c;
  padding:10px 14px;
  font-size:13px;
  font-weight:750;
  line-height:1.45;
  text-align:center
}
.demoNotice strong{color:#22ddd2}
.demoNotice a{color:#7cf5ec;font-weight:900;text-decoration:underline}
.demoPill{display:inline-flex;align-items:center;border-radius:999px;padding:4px 8px;margin-left:6px;background:#12313a;color:#68eee6;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.demoLockedButton{background:#dce5e9!important;color:#52616c!important;border:1px solid #cbd7dd!important}
.demoFeatureHint{font-size:12px;color:#647482;margin-top:7px}
.demoLockModal{display:none;position:fixed;inset:0;z-index:250;background:rgba(3,9,14,.76);align-items:center;justify-content:center;padding:18px}
.demoLockModal.on{display:flex}
.demoLockCard{width:min(520px,100%);background:white;border:1px solid #d7e0e6;border-radius:22px;padding:22px;box-shadow:0 30px 80px rgba(0,0,0,.35);text-align:center}
.demoLockIcon{width:58px;height:58px;border-radius:18px;margin:0 auto 12px;display:grid;place-items:center;background:#e6fbf9;color:#087f84;font-size:28px}
.demoLockCard h2{margin:0 0 8px}
.demoLockCard p{color:#647482;line-height:1.55}
.demoLockActions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.demoLockActions button,.demoLockActions a{border-radius:999px;padding:10px 14px;font-weight:850;text-decoration:none;background:#e7edf0;color:#0c1520;border:1px solid #d3dde4;box-shadow:none}
.demoLockActions a.primary{background:linear-gradient(135deg,#18cfc7,#0ba4ac);color:#041013;border-color:transparent}
.demoReadOnlyControl{cursor:not-allowed!important;opacity:.72!important;background:#eef2f4!important;color:#52616c!important}
.demoMutationLocked{cursor:not-allowed!important;filter:saturate(.55);position:relative}
button.demoMutationLocked::after,.filebtn.demoMutationLocked::after{content:' \1F512';font-size:.78em}
body.demoMode [aria-disabled="true"]{outline-offset:2px}
@media print{
  html,body{background:white!important}
  body>*{display:none!important}
  body::after{display:block!important;content:'WalkRound public demo — printing and report downloads are intentionally locked.';padding:30mm 18mm;font:700 18pt/1.45 Arial,sans-serif;color:#111827;text-align:center}
}
body.demoMode:not(.demoDataReady) #dashScreen .projectList,
body.demoMode:not(.demoDataReady) #dashScreen .dashboardGrid{opacity:.35;pointer-events:none}
body.demoMode .simpleSummary[data-edit-hint]::after{
  content:'✎'!important;
  display:grid!important;
  position:absolute!important;
  right:10px!important;
  top:10px!important;
  margin:0!important;
  width:26px!important;
  height:26px!important;
  place-items:center;
  border:1px solid #cbdde0;
  border-radius:999px;
  background:#eef8f7;
  color:#087f84;
  font-size:15px!important;
  line-height:1;
  box-shadow:0 2px 8px rgba(8,127,132,.08)
}
body.demoMode .simpleSummary[data-edit-hint]{position:relative;padding-right:42px}


/* Clear route from the public demo back to the sales website. */
.demoWebsiteButton{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  background:#15232e!important;
  color:#e8f5f5!important;
  border:1px solid #2c414f!important;
  text-decoration:none;
  font-size:13px;
  font-weight:850;
  line-height:1;
  white-space:nowrap
}
.demoWebsiteButton:hover{background:#1b2c38!important;border-color:#466171!important}
.demoWebsiteButton:focus-visible{outline:3px solid #22ddd2;outline-offset:2px}
.demoWebsiteShort{display:none}
@media(max-width:540px){
  .demoWebsiteLong{display:none}
  .demoWebsiteShort{display:inline}
  .demoWebsiteButton{padding:8px 10px}
}
@media(max-width:390px){
  body.demoMode .headerActions{gap:4px}
  body.demoMode .headerActions button,body.demoMode .demoWebsiteButton{padding:8px 9px;font-size:12px}
}