#title-bar {
  padding: 0.2rem var(--margin);
}
#title-bar .ctr.title {
  flex: 1 1 auto;
}
#title-bar h1 {
  display: inline-block;
}

.ctr.user-status {
  cursor: default;
}
.ctr.user-status:not(.signed-in) .signed-in {
  display: none;
}
.ctr.user-status.signed-in .signed-out {
  display: none;
}

#lists-container ul {
  font-size: calc(0.9rem * var(--scale));
  padding-left: 1rem;
}
#lists-container ul a {
  text-decoration: none;
}
.ctr.open {
  margin-top: 2rem;
}
.ctr.open .input {
  display: flex;
}
.ctr.open .input input {
  flex: 1 1 auto;
  max-width: calc(15rem * var(--scale))
}
.ctr.open .input button {
  flex: 0 0 auto;
  margin-left: 0.2rem;
}
.ctr.open .help {
  font-size: var(--font-size-xs);
  padding: 0.2rem 0 0 0.3rem;
  color: #dbb
}
.ctr.open .help .hide {
  visibility: hidden;
}
.ctr.open .help > * {
  min-height: 1rem;
}
.ctr.open .help .formatted-input {
  letter-spacing: 0.1rem;
}
.ctr.open .help .formatted-input.valid {
  color: #bdb;
}
#create-container {
  margin-top: 1rem;
}
.ctr.manual {
  margin-top: 1rem;
}
.ctr.manual a {
  text-decoration: none;
}

h2.page {
  margin-top: 3rem;
  border-bottom: 1px solid #657;
}

.cover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background: #333;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.overlay.sign-in, .overlay.sign-out {
  justify-content: space-around;
  padding-top: 1rem;
}
.dialog.sign-in, .dialog.sign-out {
  padding: 2rem;
  padding-top: 1rem;
  background: #333f;
  box-shadow: 1px 1px 4px whitesmoke;
}
.dialog.sign-in > div + div, .dialog.sign-out > div + div {
  margin-top: 0.2rem;
}
.dialog.sign-in .buttons, .dialog.sign-out .buttons {
  justify-content: space-between;
}
.dialog.sign-in .ctr.error {
  font-size: var(--font-size-xs);
  color: #f77;
}
.dialog.sign-in .ctr.error:not(.show) {
  visibility: hidden;
}

body:not(.signing-in) .cover.sign-in {
  display: none;
}
body:not(.signing-in) .overlay.sign-in {
  display: none;
}
body:not(.signing-out) .cover.sign-out {
  display: none;
}
body:not(.signing-out) .overlay.sign-out {
  display: none;
}