/* STATIC DEMO ONLY: the few additions the static build needs on top of the shared design tokens. */

/* while the chosen language is applied on first paint (see /demo/boot.js) */
html.i18n-wait body { visibility: hidden; }

/* "Demo: data lives in your browser…" sits in the existing concept strip, as a second line */
.demo__local { flex: 1 1 100%; display: flex; gap: 8px; align-items: baseline; color: var(--dusk-ink); }
.demo__local::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--sun); transform: translateY(-1px); }
.demo__in:has(.demo__reset) .demo__local { flex: 1 1 320px; }
.demo__reset {
  flex: none; margin-left: auto; min-height: 34px; padding: 7px 14px 6px; border-radius: 999px; cursor: pointer;
  font: 700 .8rem/1 var(--f-text); letter-spacing: .02em; color: var(--dusk-ink);
  background: transparent; border: 1px solid rgba(238, 230, 210, .45);
}
.demo__reset:hover { border-color: var(--sun); color: var(--sun); }
.demo__reset:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }
.demo__reset[data-armed] { background: var(--sun); border-color: var(--sun); color: var(--sun-ink); }

/* demo sign-in panel on /admin/login */
.demo-logins { margin-top: 22px; padding: 16px; border-radius: 10px; background: var(--paper-2); border: 1px dashed var(--rule-strong); font-size: .92rem; line-height: 1.45; }
.demo-logins__title { font: 700 .74rem/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; }
.demo-logins p { margin: 0 0 10px; color: var(--soft); }
.demo-logins ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.demo-logins li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 12px; background: var(--card, #FBF8F0); border: 1px solid var(--rule); border-radius: 8px; }
.demo-logins li > span { display: grid; gap: 2px; min-width: 0; }
.demo-logins code { font: 600 .84rem/1.3 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--ink); overflow-wrap: anywhere; }
.demo-logins .btn { flex: none; }
.demo-logins__who { font-weight: 700; color: var(--ink); }
.demo-ok { margin: 0 0 14px; }
@media (max-width: 440px) {
  .demo-logins { padding: 12px; }
  .demo-logins li { padding: 9px 10px; gap: 10px; }
  .demo-logins code { font-size: .8rem; overflow-wrap: normal; }
}