/* Demo-only chrome: the switcher strip and the demo index. Deliberately theme-neutral. */

/* The bar is fixed to the top of the viewport at the same height in every theme and at
   every width: two rows that scroll sideways rather than wrap, so a theme that narrows
   the body (Comic's letterbox) can't reflow it. The slot holds its place in the page, and
   --demo-h moves the theme's sticky nav and other sticky parts (base.css) below it. */
:root { --demo-h: 80px; }
.demo-slot { height: var(--demo-h); }
.demo-bar {
  position: fixed; z-index: 100; top: 0; left: 0; right: 0; height: var(--demo-h);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 0 max(12px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  background: #111; color: #ddd; box-shadow: 0 1px 0 #2a2a2a;
  font: 500 12px/1.4 ui-monospace, Consolas, monospace;
}
.demo-row {
  position: relative; display: flex; align-items: center; gap: 20px; height: 36px;
  overflow-x: auto; scrollbar-width: none; white-space: nowrap;
}
.demo-row::-webkit-scrollbar { display: none; }
/* a row with more off an edge fades out there (classes set by DemoBar's script) */
.demo-row.more-r { mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
.demo-row.more-l { mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); }
.demo-row.more-l.more-r { mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.demo-rows { display: grid; gap: 2px; min-width: 0; }
/* previous and next look, at the right whatever the rows hold */
.demo-step { display: flex; gap: 6px; padding-left: 12px; border-left: 1px solid #2a2a2a; }
.demo-bar .demo-step a {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid #3a3a3a; border-radius: 8px; font: 600 18px/1 system-ui, sans-serif;
}
.demo-bar .demo-step a:hover { background: #fff; color: #111; }
.demo-bar a:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.demo-bar a {
  flex: none; display: inline-flex; align-items: center; height: 34px; padding: 0 10px;
  color: #ddd; text-decoration: none; border-radius: 6px;
}
.demo-bar a:hover { background: #2a2a2a; }
.demo-bar a[aria-current] { background: #fff; color: #111; }
.demo-group { flex: none; display: inline-flex; align-items: center; gap: 4px; }
.demo-label { color: #888; margin-right: 4px; text-transform: uppercase; letter-spacing: 0.08em; }
.demo-home { font-weight: 700; }