/* site.css: the shared header and the event dialog. Sizes use em so the header stays the same size on projector pages. */
.site { font-size: 16px; background: var(--bg); border-bottom: 3px solid var(--navy); position: sticky; top: 0; z-index: 20; }
.site__bar { max-width: 120em; margin: 0 auto; padding: .5em 1em; display: flex; align-items: center; gap: .75em; position: relative; }
.site__brand { display: flex; align-items: center; gap: .6em; text-decoration: none; color: var(--heading); font-family: var(--font-display); font-weight: 700; font-size: 1.15em; white-space: nowrap; }
.site__brand .mark { height: 2em; padding: 0; }
.site__nav { display: flex; gap: .25em; margin-left: .75em; }
.site__nav a { padding: .5em .85em; border-radius: 5px; text-decoration: none; color: var(--ink); font-weight: 600; }
.site__nav a:hover { background: var(--surface-2); }
.site__nav a[aria-current="page"] { background: var(--navy); color: #fff; }
.site__right { display: flex; align-items: center; gap: .6em; margin-left: auto; min-width: 0; }
.site__event { min-height: 2.25em; padding: 0 .9em; border-radius: 999px; border: 2px solid var(--primary); background: var(--bg); color: var(--primary-text); font-weight: 600; font-size: .95em; white-space: nowrap; }
.site__event strong { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .08em; color: var(--heading); }
.site__event:hover { background: var(--surface-2); }
.site__menu { display: none; min-height: 2.25em; padding: 0 .9em; border-radius: 5px; border: 1px solid var(--ink-faint); background: var(--bg); color: var(--ink); font-weight: 600; margin-left: auto; }
.site__right .btn { font-size: .9em; }
.site__who { color: var(--ink-soft); font-size: .85em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14em; }

@media (max-width: 52em) {
  .site__menu { display: inline-flex; align-items: center; }
  .site__nav { display: none; position: absolute; left: 0; right: 0; top: 100%; margin: 0; flex-direction: column; gap: 0; padding: .5em 1em 1em; background: var(--bg); border-bottom: 3px solid var(--navy); box-shadow: var(--shadow-2); }
  .site__nav--open { display: flex; }
  .site__nav a { padding: .8em .6em; }
  .site__right { margin-left: 0; }
  .site__who { display: none; }
}
@media (max-width: 30em) { .site__brand span { display: none; } }

.sitedlg { border: 0; padding: 1.25em; border-radius: 6px; width: min(26em, calc(100vw - 1.5em)); background: var(--bg); color: var(--ink); box-shadow: var(--shadow-2); font-size: 16px; }
.sitedlg::backdrop { background: rgba(10, 16, 20, .55); }
.sitedlg h2 { font-size: 1.35em; }
.sitedlg__foot { display: flex; justify-content: flex-end; margin-top: .75em; }
.sitedlg .field input { font-size: 1.4em; text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; letter-spacing: .25em; min-height: 2.75em; text-transform: uppercase; }
.sitedlg .field input::placeholder, .card .field input::placeholder { letter-spacing: normal; font-family: var(--font-ui); font-weight: 400; font-size: .8em; color: var(--ink-soft); text-transform: none; }
.card--narrow .field input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; letter-spacing: .25em; text-align: center; }

/* two groups in the nav: the demo, and the event tools */
.site__label { display: none; font-size: .75em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); padding: .6em .6em .1em; }
.site__sep { width: 1px; align-self: stretch; background: var(--line); margin: .35em .6em; }
@media (max-width: 52em) {
  .site__label { display: block; }
  .site__sep { width: auto; height: 1px; margin: .6em 0 0; }
}