/* Demo pages (pattern P10, DEC-033, DEC-082): the demo ribbon and a neutral base only. Loaded by _DemoLayout after
   site.css; each demo's brand lives in css/demos/{key}.css, scoped under body.d-{key}. */

/* ---------- Ribbon: sticky, amber, ink text, one line on phones (≤ 48 px) ---------- */

/* Anchors and focus clear the sticky ribbon (WCAG 2.4.11); demos with their own sticky bars add to this. */
:root:has(body.vt-demo) {
  --vt-demo-ribbon-h: calc(var(--vt-space-6) + var(--vt-space-4));
  scroll-padding-top: calc(var(--vt-demo-ribbon-h) + var(--vt-space-4));
  scroll-padding-bottom: var(--vt-space-4);
}

.vt-demo-ribbon {
  position: sticky;
  top: 0;
  z-index: var(--vt-z-header);
  background-color: var(--vt-color-highlight);
  color: var(--vt-color-ink);
  font-family: var(--vt-font-body);
  font-size: var(--vt-text-sm);
  line-height: var(--vt-leading-tight);
  --vt-focus-color: var(--vt-color-ink);
}

.vt-demo-ribbon-inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--vt-space-3);
  min-height: var(--vt-demo-ribbon-h);
}

.vt-demo-ribbon-text {
  display: flex;
  align-items: center;
  gap: var(--vt-space-2);
  min-width: 0;
  margin: 0;
  margin-inline-end: auto;
}

/* The badge sits on the same amber: an ink outline keeps it a distinct label. */
.vt-demo-ribbon .vt-badge-demo {
  border: 1px solid var(--vt-color-ink);
  white-space: nowrap;
}

.vt-demo-ribbon-back,
.vt-demo-ribbon .vt-lang-link,
.vt-demo-ribbon .vt-lang-current,
.vt-demo-ribbon .vt-lang-sep {
  color: var(--vt-color-ink);
}

.vt-demo-ribbon-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vt-space-1);
  min-width: calc(var(--vt-space-6) + var(--vt-space-3));
  min-height: calc(var(--vt-space-6) + var(--vt-space-3));
  font-weight: var(--vt-weight-semibold);
  text-decoration: underline;
  white-space: nowrap;
}

.vt-demo-ribbon a:not(.btn) {
  color: var(--vt-color-ink);
}

.vt-demo-ribbon .vt-lang-link {
  text-decoration: underline;
}

/* ---------- Neutral base (no brand: each demo sets its own colours and fonts) ---------- */

.vt-demo main {
  overflow-x: clip;
}