/* The demo's two pages: index.html (the lobby) and seat.html (a station). */
html, body { margin: 0; }
/* The pages show and hide parts with the "hidden" attribute. A display rule
   further down (flex, block) would otherwise win over it and the part would
   stay on screen: the "Starting your station" panel did, at half the page. */
[hidden] { display: none !important; }
body { font: 16px/1.5 system-ui, sans-serif; color: #111; background: #fff; }
.page { max-width: 42em; margin: 2em auto; padding: 0 1em; }
h1 { margin-bottom: 0; }
h2 { font-size: 1.15em; margin: 1.8em 0 .4em; }
.lead { margin-top: .2em; }
.dim { color: #555; font-size: .92em; }
.note, .msg { border-left: 4px solid #b00; padding-left: 1em; }
.msg { font-weight: bold; }
.count { font-size: 1.4em; font-weight: bold; }
form label { display: block; margin: .6em 0; }
input, textarea { display: block; width: 100%; max-width: 24em; box-sizing: border-box;
                  font: inherit; padding: .4em; border: 1px solid #555; }
textarea { max-width: none; }
button, a.big { font: inherit; font-weight: bold; padding: .5em 1.2em; border: 2px solid #111;
                background: #111; color: #fff; cursor: pointer; text-decoration: none; display: inline-block; }
button.plain { background: #fff; color: #111; font-weight: normal; padding: .2em .7em; border-width: 1px; }
.shot { display: block; width: 100%; height: auto; border: 1px solid #555; margin: 1em 0; }
.seated { list-style: none; padding: 0; }
.seated li { margin: .35em 0; }

/* seat.html: a bar across the top, the station filling the rest. */
body.seat { height: 100vh; height: 100dvh;   /* dvh tracks a phone's collapsing address bar */
            display: flex; flex-direction: column; overflow: hidden; }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: .3em 1em; padding: .3em .8em;
       background: #111; color: #fff; font-size: 14px; }
.bar strong { font-size: 16px; }
.bar .grow { flex: 1; }
.bar button { border-color: #fff; background: #111; padding: .15em .7em; font-weight: normal; }
.banner { padding: .5em .8em; background: #ffe08a; color: #111; }
.banner button { padding: .15em .7em; margin-left: .5em; }
#station { flex: 1; width: 100%; border: 0; display: block; min-height: 0; }
.cover { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1em; }
dialog { max-width: 32em; width: 90%; border: 2px solid #111; }

/* A phone: the station needs every pixel, so the bar says less, and the
   front page's screenshot is the phone one at its own shape. */
@media (max-width: 600px) {
  .bar { font-size: 12px; padding: .2em .5em; gap: .2em .6em; }
  .bar .wide { display: none; }
  .bar strong { font-size: 14px; }
  .shot { width: 70%; margin-left: auto; margin-right: auto; }
}