/* Lockright · website demo (dist/app/ only, added by tools/site-build.mjs).
   Colours and type come from the app's own variables: nothing new is introduced here. */

/* "Demo" beside the wordmark, at every width */
.demo-tag { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--lime); color: var(--lime); font: 600 11.5px/1 var(--label); letter-spacing: 1.4px; text-transform: uppercase; }

/* one line under the top bar saying what this page is */
.demo-strip { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(184, 242, 58, .28); background: rgba(184, 242, 58, .05); color: var(--text); font-size: 13.5px; }
.demo-strip b { color: var(--lime); font-family: var(--display); }
.demo-strip-tools { display: flex; gap: 8px; flex: 0 0 auto; }
.demo-strip .btn, .demo-note .btn, .demo-row .btn { text-decoration: none; }

/* the note: Run, Scan, Find the rest, Save, Open and the license key all end here */
.demo-scrim { position: fixed; inset: 0; z-index: 94; background: rgba(4, 5, 3, .8); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal.demo-note { z-index: 95; width: min(430px, calc(100vw - 32px)); padding: 24px; }
.demo-note-text { margin: 0 0 18px; font: 600 18px/1.35 var(--display); color: var(--cream); }
.demo-note-tools { display: flex; gap: 10px; flex-wrap: wrap; }

.demo-row span { color: var(--muted); font-size: 13px; }
.demo-row .btn { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 720px) {
  .demo-strip-tools { width: 100%; }
  .demo-strip-tools .btn { flex: 1; justify-content: center; }
}
@media print { .demo-tag, .demo-strip { display: none; } }