/* Margin Machine sales demo chrome: the "made-up businesses" bar, the note
   that answers a save, and the shell offsets that make room for the bar.
   Colors come from the app's own tokens, so dark mode follows html[data-theme]. */
:root { --demo-h: 34px; }

.demo-banner {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  height: var(--demo-h); padding: 0 16px; box-sizing: border-box;
  background: var(--nav, #16231c); color: var(--nav-ink, #e8efe9);
  font: 600 13px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: .01em; white-space: nowrap; overflow: hidden;
}
.demo-banner .demo-cta {
  color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 700;
}
.demo-banner .demo-cta:hover { opacity: .85; }
.demo-banner .demo-short { display: none; }
@media (max-width: 620px) {
  .demo-banner .demo-long { display: none; }
  .demo-banner .demo-short { display: inline; }
}

/* the dashboard shell: a fixed bar above the fixed topbar and sidebar */
html[data-demo-kind="dashboard"] .demo-banner { position: fixed; left: 0; right: 0; top: 0; z-index: 65; }
html[data-demo-kind="dashboard"] { scroll-padding-top: calc(var(--topbar-h) + var(--demo-h) + 12px); }
html[data-demo-kind="dashboard"] body { padding-top: calc(var(--topbar-h) + var(--demo-h)); }
html[data-demo-kind="dashboard"] .sidebar,
html[data-demo-kind="dashboard"] .topbar { top: var(--demo-h); }
html[data-demo-kind="dashboard"] #acctmenu { top: calc(var(--topbar-h) + var(--demo-h) + 8px); }
html[data-demo-kind="dashboard"][data-view="checks"] .check-summary { top: calc(var(--topbar-h) + var(--demo-h) + 24px); }
html[data-demo-kind="dashboard"][data-view="costs"] .costside { top: calc(var(--topbar-h) + var(--demo-h) + 24px); }
html[data-demo-kind="dashboard"][data-view="months"] #proof { top: calc(var(--topbar-h) + var(--demo-h) + 24px); }
@media (max-width: 900px) {
  html[data-demo-kind="dashboard"] { scroll-padding-top: calc(66px + var(--demo-h)); }
  html[data-demo-kind="dashboard"] body { padding-top: calc(56px + var(--demo-h)); }
  html[data-demo-kind="dashboard"] .mobile-head { top: var(--demo-h); }
}

/* the other pages (all businesses, QuickBooks) keep their own layouts */
html[data-demo-kind="page"] .demo-banner { position: sticky; top: 0; z-index: 65; }

.demo-banner .demo-all {
  color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 600;
}

/* the pill never shrinks or ellipsizes (the shell's crumb and brand rules
   ellipsize every span, which would cut it to "Example ..."); the business
   name gives way instead */
.demo-pill { margin-left: 10px; vertical-align: middle; white-space: nowrap; flex-shrink: 0; }
.demo-pill span { overflow: visible !important; text-overflow: clip !important; }
.demo-pill .demo-pill-short { display: none; }
.mobile-brand .demo-pill { margin-left: 2px; font-size: 11px; overflow: visible; text-overflow: clip; }
.mobile-brand > span:not(.brand-mark):not(.demo-pill) {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 420px) {
  .demo-pill .demo-pill-long { display: none; }
  .demo-pill .demo-pill-short { display: inline; }
}

/* the note that answers a save, a sync or a private page */
.demo-note {
  position: fixed; left: 50%; bottom: calc(var(--bottomnav-h, 0px) + 22px); z-index: 90;
  transform: translate(-50%, 12px); width: max-content; max-width: min(560px, calc(100vw - 32px));
  box-sizing: border-box; padding: 12px 16px; border-radius: 12px;
  background: var(--nav, #16231c); color: var(--nav-ink, #e8efe9);
  font: 500 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.demo-note.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.demo-note a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; margin-left: 6px; white-space: nowrap; }
@media (max-width: 900px) {
  .demo-note { bottom: calc(var(--bottomnav-h, 0px) + 84px); }
}
@media (prefers-reduced-motion: reduce) {
  .demo-note { transition: none; }
}