/* Demo-only ribbon: a slim bar above the header, so the one-row header is untouched. */
.demo-ribbon {
  background: var(--brand-tint);
  color: var(--brand-deep);
  border-bottom: 1px solid var(--rule);
  font-size: var(--step--1);
  line-height: var(--leading-tight);
  padding: var(--s-1) 0;
  text-align: center;
}

/* Preview live-check banner (static preview only; the markup is added by export). */
.live-banner {
  background: var(--surface);
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  font-size: var(--step--1);
  line-height: var(--leading-tight);
  padding: var(--s-2) 0;
  text-align: center;
}
.live-banner a {
  color: var(--brand-deep);
  font-weight: 600;
  text-decoration: underline;
}
.live-banner[data-state="live"] {
  background: var(--brand-tint);
  color: var(--brand-deep);
}

/* Stands in for an action that only works on the live site (preview pages). */
.btn-muted {
  display: inline-block;
  color: var(--muted);
  border: 1px dashed var(--rule-strong);
  border-radius: 4px;
  padding: var(--s-2) var(--s-4);
  font-size: var(--step--1);
  line-height: var(--leading-tight);
}