/* ══════════════════════════════════════════════
   DEMO MODE + ROUTE-LEVEL ADDITIONS
══════════════════════════════════════════════ */
a.btn{text-decoration:none;}
a.btn:hover{text-decoration:none;}
.skip-link{position:absolute;left:-9999px;top:8px;background:var(--accent);color:#0f0f0f;padding:8px 14px;border-radius:8px;z-index:1000;font-size:13px;font-weight:500;}
.skip-link:focus{left:8px;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* Live-only UI (create/forgot-password) stays hidden in demo-only builds; the router
   adds .live-enabled on <html> when MM_ENV.demoOnly is false. */
.live-only{display:none !important;}
.live-enabled .live-only{display:revert !important;}

/* Demo chrome inside the app */
.demo-only,.demo-only-inline{display:none;}
body.is-demo .demo-only{display:block;}
body.is-demo .demo-only-inline{display:inline-flex;}
body.is-demo #sidebar-change-pw,body.is-demo [data-page="change-pw"]{display:none !important;}
.demo-tools{margin-bottom:8px;padding:8px;border:1px dashed rgba(212,168,83,.35);border-radius:var(--radius-sm);background:var(--accent-bg);}
.demo-tag{font-size:10px;letter-spacing:.12em;font-weight:600;color:var(--accent);margin:0 2px 6px;}
.demo-tools .nav-item{color:var(--text2);margin-bottom:2px;padding:6px 8px;font-size:12px;}
.demo-badge{align-items:center;font-size:10px;font-weight:600;letter-spacing:.08em;color:var(--accent);background:var(--accent-bg);border:1px solid rgba(212,168,83,.3);border-radius:99px;padding:2px 8px;}

/* Demo role picker */
.demo-card{max-width:760px !important;}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0 6px;}
.demo-role{display:flex;flex-direction:column;gap:6px;padding:18px;border:1px solid var(--border2);border-radius:var(--radius);background:var(--bg3);color:var(--text);transition:transform .15s,border-color .15s,box-shadow .15s;}
.demo-role:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 24px var(--shadow);text-decoration:none;}
.demo-role-title{font-family:var(--font-serif);font-size:20px;color:var(--accent);}
.demo-role-blurb{font-size:13px;color:var(--text2);line-height:1.5;}
.demo-role ul{margin:6px 0 10px 16px;padding:0;font-size:12px;color:var(--text3);line-height:1.7;}
.demo-role-cta{margin-top:auto;font-size:13px;font-weight:500;color:var(--accent);}
.demo-note{font-size:12px;color:var(--text3);text-align:center;margin-top:14px;line-height:1.6;}
.demo-note code,.demo-login code{background:var(--bg4);padding:1px 6px;border-radius:5px;font-size:11px;color:var(--text);}
.demo-login{margin-top:18px;padding-top:16px;border-top:1px solid var(--border);}
.demo-login-title{font-size:12px;font-weight:600;color:var(--text2);margin-bottom:10px;text-align:center;}
.demo-login-btns{display:grid;grid-template-columns:1fr;gap:8px;}
.demo-login-btns .btn{justify-content:center;}
.demo-creds{font-size:11px;color:var(--text3);text-align:center;margin-top:10px;line-height:1.7;}

/* Engineering section (landing) */
.eng-stack{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:820px;margin:28px auto 0;}
.eng-chip{font-size:12px;color:var(--text2);border:1px solid var(--border2);border-radius:99px;padding:4px 12px;background:var(--bg2);}

/* Don't render below-the-fold landing sections until they're near the viewport */
#how-it-works,#engineering,.land-cta,.land-footer{content-visibility:auto;contain-intrinsic-size:auto 480px;}

@media (max-width:640px){
  .demo-grid,.demo-login-btns{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}
a.auth-back{display:inline-block;text-decoration:none;}

/* Sign-in / sign-up screens are shared between the real app and the sandbox. */
body:not(.is-demo) .in-demo{display:none !important;}
body.is-demo .in-real{display:none !important;}