/* Shared finishing details for the planner's main sections. */
#appShell :is(#boardScreen,#seatingScreen,#vendorsScreen,#tasksScreen,#budgetScreen,#timelineScreen,#menuScreen,#teamScreen,#contactsScreen) > .head {
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 22px;
}
#appShell :is(#boardScreen,#seatingScreen,#vendorsScreen,#tasksScreen,#budgetScreen,#timelineScreen,#menuScreen,#teamScreen,#contactsScreen) > .head p {
  max-width: 68ch;
  font-size: 13px;
  line-height: 1.6;
}
#appShell :is(#boardScreen,#seatingScreen,#vendorsScreen,#tasksScreen,#budgetScreen,#timelineScreen,#menuScreen,#teamScreen,#contactsScreen) :is(button,summary,input,select,textarea,a):focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}
#appShell :is(#boardScreen,#seatingScreen,#vendorsScreen,#tasksScreen,#budgetScreen,#timelineScreen,#menuScreen,#teamScreen,#contactsScreen) .btn:disabled {
  cursor: not-allowed;
  opacity: .55;
}
#appShell :is(#boardScreen,#seatingScreen,#vendorsScreen,#tasksScreen,#budgetScreen,#timelineScreen,#menuScreen,#teamScreen,#contactsScreen) .panel {
  min-width: 0;
}
@media (max-width: 700px) {
  #appShell :is(#boardScreen,#seatingScreen,#vendorsScreen,#tasksScreen,#budgetScreen,#timelineScreen,#menuScreen,#teamScreen,#contactsScreen) > .head {
    flex-wrap: wrap;
  }
  #appShell :is(#boardScreen,#seatingScreen,#vendorsScreen,#tasksScreen,#budgetScreen,#timelineScreen,#menuScreen,#teamScreen,#contactsScreen) > .head h1 {
    font-size: clamp(27px, 8vw, 34px);
    line-height: 1.2;
  }
}