/* ==========================================================================
   demo-bar.css — the strip that sits above every demo template.
   Carries the storefront's dark/lime identity so it reads as "you are inside
   a demo", and gives a one-click route back out and forward into the form.

   Deliberately uses a system monospace stack rather than DM Mono: it is chrome,
   not content, and it should not cost a demo page an extra webfont download.
   ========================================================================== */

.dbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px clamp(14px, 4vw, 28px);
  background: #0F1013;
  color: #F2F1EC;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1;
  border-bottom: 1px solid rgba(242, 241, 236, .14);
}

.dbar a { color: inherit; white-space: nowrap; }

.dbar__back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(242, 241, 236, .72);
  transition: color .2s ease;
}
@media (hover: hover) { .dbar__back:hover { color: #D6F94C; } }

.dbar__mid {
  color: rgba(242, 241, 236, .5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dbar__mid strong { color: rgba(242, 241, 236, .82); font-weight: 500; }

.dbar__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #D6F94C;
  color: #0F1013;
  border-radius: 999px;
  padding: 7px 14px;
  font-weight: 500;
  transition: transform .2s ease, box-shadow .2s ease;
}
@media (hover: hover) {
  .dbar__cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(214, 249, 76, .3); }
}

.dbar :focus-visible { outline-color: #D6F94C; }

/* On phones the middle label is the first thing to go — back and forward
   are the two controls that actually matter. */
@media (max-width: 700px) {
  .dbar__mid { display: none; }
  .dbar { font-size: 11.5px; }
}
@media (max-width: 380px) {
  .dbar__back span { display: none; }   /* leaves the arrow alone */
}