/* Calm Budget — the demo bar. Shipped only in the demo build, linked into
   demo/index.html by scripts/build-demo.mjs, so the product stylesheet carries
   no rules for a component the product never renders.

   No new colours: the soft accent tint and the accent text colour are the same
   two tokens the Activity month chip and the "waiting to be sorted" badge use.
   The fill belongs to the Add button and nothing else, so the bar takes the
   tint — it is the one coral-tinted thing on any given screen.

   The bar sits inside #app, above .topbar, which means Focus mode hides it for
   free: html[data-focus] #app { display: none } already takes the whole app out
   of the page. */

.demo-bar {
  /* Never wraps, at any width. A wrapping flex line does not shrink, it gets
     taller: at 560px this bar was 76px — two rows of furniture above the
     number, on every screen, for the life of the demo. */
  display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap;
  gap: 4px 10px; min-height: var(--tap);
  padding: 4px max(10px, var(--sar)) 4px max(10px, var(--sal));
  background: var(--accent-soft); color: var(--accent-text);
  font-size: 0.875rem; font-weight: 600;
}

/* One row, and at 44px. The bar is permanent furniture above the number on
   every screen, so a second row is 30px of someone's phone taken for the life
   of the demo. The text takes what is left after the two controls and ellipses
   only if it truly cannot fit; wrapping stays as the last resort so nothing can
   ever overlap. */
.demo-bar-text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 559px) {
  .demo-bar { font-size: 0.8125rem; gap: 4px 6px; padding-left: max(8px, var(--sal)); padding-right: max(8px, var(--sar)); }
  /* The two controls were taking 189px of a 390px row and leaving the sentence
     15px short of fitting. They keep their 44px height — they are still thumb
     targets — and give the words the width back. */
  .demo-bar .btn-small { padding-left: 6px; padding-right: 6px; font-size: 0.75rem; }
  .demo-bar-actions { gap: 4px; }
}

.demo-bar-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-left: auto; }

/* Both controls inherit the bar's colour rather than introducing one. The link
   is the only way out of the demo, so it reads as the firmer of the two. */
.demo-bar .btn { color: inherit; }
.demo-bar .btn-outline { border-color: currentColor; }
.demo-bar a.btn { text-decoration: none; display: inline-flex; align-items: center; }

/* At desktop widths .topbar is hidden and #app is a block padded 64px clear of
   the fixed sidebar, so the bar already spans the content area. It only needs
   the same 28px gutter .content uses, so it lines up with everything below it. */
@media (min-width: 900px) {
  .demo-bar { padding-left: 28px; padding-right: 28px; }
}