/* The demo site's own lines: the banner every page of a demo carries (it has no control to hide it) and the start
   page. Kit tokens only, so it follows the theme and the company's accent. */
.demo-banner {
  display: block;
  margin: 0;
  padding: var(--sp-2) var(--sp-4);
  padding-inline-start: max(var(--sp-4), env(safe-area-inset-left));
  background: var(--hold-tint);
  color: var(--hold-ink);
  border-block-end: 1px solid var(--hold);
  font-size: var(--fs--1);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
.demo-start h1 { margin-block: var(--sp-6) var(--sp-3); }
.demo-start h2 { margin-block: var(--sp-8) var(--sp-2); font-size: var(--fs-2); }
.demo-start .demo-about { color: var(--muted); margin-block-end: var(--sp-3); }
.demo-start .demo-row { flex-wrap: wrap; row-gap: var(--sp-2); }
.demo-start .demo-row .row__main { flex: 1 1 12rem; min-width: 12rem; }
.demo-start .demo-row form { margin: 0; }
/* the kit caps a row's end at 45 % of the row; a seat's button wider than that ran out of it to the left by its own
   width, so the buttons stood at a different place on each line of a phone: here the end takes its button's width */
.demo-start .demo-row .row__end { max-inline-size: none; }
.demo-start .demo-row .btn { white-space: nowrap; }
.demo-start form.stack { display: grid; gap: var(--sp-4); margin-block-start: var(--sp-4); }

/* In the kit's app shell (a grid of named areas) the banner takes a row of its own above the top bar. */
.app > .demo-banner { grid-area: demo; }
.app:has(> .demo-banner) { grid-template-rows: auto auto 1fr auto; grid-template-areas: "demo" "top" "main" "nav"; }
.app.app--bare:has(> .demo-banner) { grid-template-rows: auto auto 1fr; grid-template-areas: "demo" "top" "main"; }
@media (min-width: 900px) {
  .app:has(> .demo-banner) { grid-template-rows: auto auto 1fr; grid-template-areas: "demo demo" "nav top" "nav main"; }
  .app.app--bare:has(> .demo-banner) { grid-template-rows: auto auto 1fr; grid-template-areas: "demo" "top" "main"; }
}