/* Mobile task editor: readable fields and a save action above the keyboard. */
@media (max-width: 700px), (max-width: 1050px) and (max-height: 540px) and (pointer: coarse) {
  #taskModal {
    inset: auto 0 auto 0;
    top: var(--task-modal-visual-top, 0px);
    height: var(--task-modal-visual-height, 100dvh);
    box-sizing: border-box;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    padding: 8px !important;
  }

  #taskModal > .task-dialog {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
    max-height: 100% !important;
    padding: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #taskModal .dialog-header { margin-bottom: 8px; }
  #taskModal .field-label { margin-top: 10px; }
  #taskModal .task-notes-input { min-height: 76px; }

  /* iOS Safari zooms focused form controls whose text is below 16px. */
  #taskModal input:not([type="checkbox"]),
  #taskModal textarea,
  #taskModal select { font-size: 16px !important; }

  #taskModal .editor-actions {
    position: sticky;
    z-index: 3;
    bottom: -16px;
    margin: 14px -16px -16px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid var(--line-soft, #e8ebef);
    box-shadow: 0 -8px 20px rgba(20, 30, 50, .05);
  }

  #taskModal .editor-actions > button { min-height: 44px; }
  #taskModal .editor-actions > .danger-button { order: 0; }
}

@media (max-height: 500px) and (pointer: coarse) {
  #taskModal > .task-dialog { padding-top: 10px; }
  #taskModal .dialog-header p { display: none; }
  #taskModal .dialog-header { margin-bottom: 3px; }
}

html[data-theme="dark"] #taskModal .editor-actions {
  background: #1c2734;
  border-color: #3c4b5d;
}