/* The brand is taken out of the flow so that it stays centred whatever is at the sides. */
#navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 2; padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); background: var(--wood-dark); color: var(--head); }
#navbar .nav-inner { position: relative; display: flex; align-items: center; justify-content: space-between; height: var(--bar-height); padding: 0 0.5rem; }
#navbar .brand { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 0.5rem; font-size: 1.125rem; font-weight: bold; }
#navbar .brand img { display: block; width: 2rem; height: 2rem; }
/* Holding the brand asks for the private voice's token, so a long press must not select it or open a menu. */
#navbar .brand { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#navbar .brand img { pointer-events: none; }
#session-stop { min-width: 4.5rem; min-height: var(--tap); padding: 0 0.75rem; font-size: 1.125rem; font-weight: bold; border: 1px solid var(--head); border-radius: 0.5rem; background: var(--stop); color: var(--head); }

.navbot { position: fixed; bottom: 0; left: 0; right: 0; z-index: 2; display: flex; height: calc(var(--navbot-height) + env(safe-area-inset-bottom)); padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); background: var(--wood-dark); }
.nav-link-bottom { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.125rem; border: 0; background: transparent; color: var(--rim-light); fill: var(--rim-light); font: inherit; font-size: 0.875rem; }
.nav-link-bottom svg { width: 1.75rem; height: 1.75rem; }
.nav-link-bottom.selected { background: var(--wood); color: var(--head); fill: var(--head); font-weight: bold; }
.nav-link-bottom:focus-visible, #session-stop:focus-visible { outline-color: var(--head); outline-offset: -0.3rem; }