/* The demo banner. One stylesheet, because there were two: app.css dressed it
   on the console's pages and demo.css on the demo's own, with different type
   sizes and padding -- so the strip changed size as you crossed between the
   two halves. The markup is one partial; this is its one set of rules. */
.demo-banner {
  background: #0f172a; color: #cbd5e1;
  /* Its own typography, not the host page's. The two documents set different
     body fonts -- 16px/1.5 on the console, 17px/1.65 on the demo's own pages
     -- and a strip that inherits line-height from whatever it lands in is a
     strip that changes height when you cross between them. Size was already
     pinned; the line-height and the family were not, which is the millimetre
     that was left. */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: .88rem; line-height: 1.45;
  padding: 8px 24px;
  /* Three tracks: an empty one, the sentence, the buttons. The buttons keep
     the right edge and the sentence is centred on the page rather than in
     whatever space they leave -- with two items it could be one or the other,
     never both. */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 8px 24px;
  /* And a floor, so the next edit to either sentence cannot bring the jump
     back by wrapping one of them. */
  min-height: 46px; box-sizing: border-box;
}

/* Narrow enough and the buttons drop under the sentence, where they are
   centred rather than clinging to an edge nobody can see. */
/* Narrow enough and the buttons drop under the sentence, where they centre
   rather than cling to an edge nobody can see. */
@media (max-width: 640px) {
  .demo-banner { grid-template-columns: 1fr; padding: 8px 12px; gap: 6px; }
  .demo-banner::before { display: none; }
  .demo-banner-nav { justify-self: center; }
}

/* Narrower still and the three buttons cannot share a line either. They are
   nowrap individually, so without this the strip sets the width of the page. */
@media (max-width: 380px) {
  .demo-banner-nav { flex-wrap: wrap; justify-content: center; }
}
.demo-banner::before { content: ""; }
.demo-banner strong { color: #fff; }

/* The note takes the space, the buttons keep the edge. Centred as siblings,
   the three buttons sat wherever the sentence beside them ended -- so they
   moved sideways as you crossed between the halves, which is the worst place
   for a control to move: the one you are about to press again. */
.demo-banner-note { text-align: center; }

.demo-banner-nav { display: flex; gap: 6px; justify-self: end; }
.demo-banner-nav a {
  color: #cbd5e1; text-decoration: none; border-radius: 999px;
  padding: 4px 12px; border: 1px solid transparent; white-space: nowrap;
}
.demo-banner-nav a:hover { border-color: #334155; color: #fff; }
/* Which half you are looking at, marked rather than guessed at. */
.demo-banner-nav a.on { background: #1d4ed8; color: #fff; }
.demo-banner-nav a.leave { color: #94a3b8; }
.demo-banner-nav a.leave:hover { color: #fff; }