html,
body {
  overflow-x: clip;
}

.app-shell,
.shell-body,
.shell-body > *,
.today-scroll,
.today-houses,
.card {
  min-width: 0;
  max-width: 100%;
}

.today-scroll {
  max-height: 70vh;
  overflow: auto;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
  width: 100%;
}

.field.is-check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: auto;
}

.stack-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.stack-form > .btn,
.stack-form > button {
  width: 100%;
  margin-top: 12px;
}

.staff-page .field {
  color: var(--muted);
  margin-top: 10px;
}

.staff-page .field input,
.staff-page .field select,
.staff-page .field textarea {
  width: 100%;
}

.field input,
.field select,
.house-profile select,
.house-crew select {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
  background: #fff;
  color: var(--ink);
}

.field input::placeholder,
.stay-card input::placeholder,
.holiday-card input::placeholder,
.caretaker-list input::placeholder {
  color: #8a7b72;
}

.chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  background: var(--cal-head);
  border-radius: 999px;
  padding: 6px 10px;
  margin: 2px 6px 2px 0;
}

.chip:has(input:checked) {
  background: var(--chip-on);
  box-shadow: inset 0 0 0 1.5px var(--mark-blue);
}

.chip input {
  accent-color: var(--mark-blue);
  margin: 0;
}