/* The /demo page (cloud/site.py demo_page()): a banner that says it is a demo, over the app's own dashboard in a
   sandboxed frame (/demo/app). Colors and type from the shared design tokens in static/app.css. */
html,body.demo-page{height:100%}
body.demo-page{margin:0;padding:0;display:flex;flex-direction:column;min-height:0;background:var(--c-bg);color:var(--c-text);font-family:var(--sans)}
.demo-bar{flex:none;display:flex;align-items:center;gap:10px 14px;padding:8px 24px;min-height:52px;box-sizing:border-box;
  background:var(--c-surface);border-bottom:1px solid var(--c-line)}
.demo-bar p{margin:0;flex:1;min-width:0;font-size:14px;line-height:1.35;color:var(--c-text-2)}
.demo-bar p b{color:var(--c-text);font-weight:650}
.demo-home{display:inline-flex;flex:none;line-height:0}.demo-home img{width:24px;height:24px;border-radius:6px}
.demo-cta{flex:none;display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;background:var(--c-accent);color:var(--c-accent-ink);font-weight:650;font-size:14px;text-decoration:none}
.demo-cta-short{display:none}
.demo-cta:hover{background:var(--c-accent-hover)}
.demo-help{flex:none;font-size:14px;color:var(--c-text-2);text-decoration:none}.demo-help:hover{color:var(--c-text);text-decoration:underline}
.demo-cta:focus-visible,.demo-home:focus-visible,.demo-help:focus-visible{outline:2px solid var(--c-amber);outline-offset:2px}
.demo-frame{flex:1 1 auto;display:block;width:100%;min-height:0;border:0;background:var(--c-bg)}
.demo-noscript{margin:24px;color:var(--c-text-2)}
@media(max-width:560px){.demo-bar{padding:8px 16px;gap:10px}.demo-bar p{font-size:13px}.demo-bar p span{display:block}.demo-cta-long{display:none}.demo-cta-short{display:inline}}