/* The live demo's own frame (S78): a "Sample data" bar over the real app, and the controls the demo can't serve
   (the range, the bar size, import, accounts) shown but switched off. The app's own styles are untouched. */
.demo-bar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 14px; padding: 8px 20px;
  background: #0b1220; color: #e8ecf3; font: 500 13px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; }
.demo-bar b { color: #fff; font-weight: 650; }
.demo-bar .demo-tag { padding: 2px 8px; border-radius: 999px; background: #f5c451; color: #1d1600; font-weight: 700;
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.demo-bar .demo-sp { flex: 1; }
.demo-bar a { color: #e8ecf3; text-decoration: none; }
.demo-bar a.demo-dl { padding: 6px 12px; border-radius: 7px; background: #3b82f6; color: #fff; font-weight: 600; }
.demo-bar a:hover { text-decoration: underline; }
.demo-bar a.demo-dl:hover { text-decoration: none; background: #2f6fe0; }
.demo-narrow { display: none; }
@media (max-width: 900px) {
  .demo-narrow { display: block; padding: 10px 16px; background: #fff7e0; color: #4a3a00;
    font: 500 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; }
  .demo-bar .demo-hide-sm { display: none; }
}
/* the demo's answers are for one range and bar size: the controls show it, but don't open */
html.demo #period, html.demo #grain { pointer-events: none; opacity: .75; }
html.demo .topbar { top: 36px; }
/* not part of a demo: the account (Connect) and the chart-type samples board */
html.demo #acct-btn, html.demo .nav[data-page="gallery"] { display: none; }
/* the demo draws the map's areas without the street map (the app ships it; the site doesn't): no "graphics" note */
html.demo .map-note { display: none; }
/* S90: the builder makes any chart, and the demo holds only its starting ideas on My charts: no "Create a custom chart"
   box on the other pages (each opens the builder on a chart the demo cannot answer) */
html.demo .my-add-box, html.demo .my-add-cell { display: none !important; }
/* S112b: the practice menu works in the demo (three sample practices); its Billing item is the account, not part of a demo */
html.demo #pr-billing { display: none; }