/* Demo mode (public/js/demo.js): the sidebar badge, the line on screens that show demo content, and the dialog. */
.sb-demo { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 6px; padding: 6px 9px; border-radius: 9px; cursor: pointer; text-align: left;
  border: 1px dashed color-mix(in srgb, var(--accent) 60%, var(--line)); background: var(--accent-soft); color: var(--accent-ink); }
.sb-demo:hover { border-style: solid; }
.sb-demo span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.sb-demo b { font-size: 12.5px; font-weight: 600; }
.sb-demo small { font-size: 11px; opacity: .8; }
.sidebar.collapsed .sb-demo { justify-content: center; padding: 6px; }
.sidebar.collapsed .sb-demo span { display: none; }

.demo-strip { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.5;
  border: 1px dashed color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); color: var(--text); }
.demo-strip > svg { flex: none; margin-top: 3px; color: var(--accent-ink); }
.demo-strip b { color: var(--accent-ink); }
.demo-strip .link-btn { margin-left: 4px; }
#main > .demo-strip { margin: 0 24px 12px; flex: none; }
@media (max-width: 700px) { #main > .demo-strip { margin: 0 16px 10px; } }

.demo-dlg p { margin: 0 0 12px; line-height: 1.55; }
.demo-parts { margin: 0 0 14px; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 1.5; }
.demo-parts li.muted { color: var(--text-3); }