#hireling-modal { width: 360px; max-width: calc(100vw - 24px); }
#hireling-modal [hidden] { display: none !important; }
#hireling-modal label { display: grid; grid-template-columns: 65px minmax(0, 1fr); align-items: center; gap: 8px; margin-bottom: 12px; }
#hireling-modal input, #hireling-modal select { width: 100%; box-sizing: border-box; min-width: 0; }
#hireling-modal .hireling-owner { color: #bcbcbc; margin-bottom: 12px; overflow-wrap: anywhere; }
#hireling-modal .hireling-services { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#hireling-modal .hireling-services button { min-height: 36px; height: auto; padding: 7px; white-space: normal; }
#hireling-modal [data-service="cook"], #hireling-modal [data-service="random"] { grid-column: 1 / -1; }
#hireling-modal .hireling-owner-actions { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 14px; margin-top: 14px; border-top: 1px solid #555; }
#hireling-modal .hireling-owner-actions button { flex: 1; min-width: 90px; }
#hireling-modal textarea { width: 100%; box-sizing: border-box; resize: vertical; min-width: 0; max-height: 120px; }
#hireling-modal .hireling-welcome-label { grid-template-columns: 1fr; }

/* Same dark select as the Store's (store.css): without it the profession picker was the
   browser's plain white box, and its open list white too */
#hireling-modal select {
  color: white;
  background-color: #2b2b2b;
  background-image: url("../png/bg2.png");
  border: 1px solid black;
  padding: 3px 4px;
}

#hireling-modal select option {
  background-color: #2b2b2b;
  color: #ddd;
}