/* Lavender Lotus Studio 9.3.2 — iPhone proposal/contract modal containment */
@media (max-width: 760px) {
  /* Use the full usable viewport and never allow the dialog itself to create sideways overflow. */
  .dialog-layer:has(.proposal-creation-modal),
  .dialog-layer:has(.modal-contract-packet) {
    padding: 5px !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    overflow: hidden !important;
  }

  .modal.proposal-creation-modal,
  .modal.modal-contract-packet {
    box-sizing: border-box !important;
    width: calc(100vw - 10px) !important;
    max-width: calc(100vw - 10px) !important;
    min-width: 0 !important;
    height: calc(100dvh - 10px) !important;
    max-height: calc(100dvh - 10px) !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    resize: none !important;
  }

  .proposal-creation-modal > form,
  .modal-contract-packet > form {
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    grid-template-rows: auto minmax(0,1fr) auto !important;
    overflow: hidden !important;
  }

  .proposal-creation-modal .modal-header,
  .modal-contract-packet .modal-header {
    min-width: 0 !important;
    padding: 18px 18px 14px !important;
  }

  .proposal-creation-modal .modal-body,
  .modal-contract-packet .modal-body {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 16px 14px 22px !important;
    overflow-y: auto !important;
    overflow-x: clip !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    scrollbar-gutter: auto !important;
  }

  /* Every form/grid becomes a single clean column on phones. */
  .proposal-creation-modal .form-grid,
  .proposal-creation-modal .proposal-creation-grid,
  .proposal-creation-modal .tax-editor,
  .proposal-creation-modal .tax-editor-grid,
  .proposal-creation-modal .tax-editor-grid > *,
  .proposal-creation-modal .proposal-creation-grid > *,
  .proposal-creation-modal .span-2,
  .modal-contract-packet .contract-form-grid,
  .modal-contract-packet .contract-form-grid > *,
  .modal-contract-packet .span-2 {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-column: 1 / -1 !important;
  }

  .proposal-creation-modal .form-grid,
  .proposal-creation-modal .proposal-creation-grid,
  .proposal-creation-modal .tax-editor-grid,
  .modal-contract-packet .contract-form-grid {
    grid-template-columns: minmax(0,1fr) !important;
    gap: 13px !important;
  }

  .proposal-creation-modal .tax-editor {
    display: block !important;
    padding: 14px !important;
    border-radius: 18px !important;
    overflow: visible !important;
  }
  .proposal-creation-modal .tax-editor-head,
  .proposal-creation-modal .tax-editor-grid,
  .proposal-creation-modal .tax-editor-actions,
  .proposal-creation-modal .tax-editor-note {
    margin-top: 12px !important;
  }

  /* Critical iPhone fix: checkbox must remain a compact horizontal row, not a giant grid cell. */
  .proposal-creation-modal label.checkbox-field,
  .modal-contract-packet label.checkbox-field,
  .proposal-creation-modal .checkbox-field,
  .modal-contract-packet .checkbox-field {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 11px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 13px !important;
    overflow: hidden !important;
  }
  .proposal-creation-modal .checkbox-field input[type="checkbox"],
  .modal-contract-packet .checkbox-field input[type="checkbox"] {
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    display: block !important;
    flex: 0 0 20px !important;
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    margin: 1px 0 0 !important;
    padding: 0 !important;
  }
  .proposal-creation-modal .checkbox-field > span,
  .modal-contract-packet .checkbox-field > span {
    display: block !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  .proposal-creation-modal .checkbox-field strong,
  .proposal-creation-modal .checkbox-field small,
  .modal-contract-packet .checkbox-field strong,
  .modal-contract-packet .checkbox-field small {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
  }
  .proposal-creation-modal .checkbox-field strong,
  .modal-contract-packet .checkbox-field strong { font-size: .78rem !important; line-height: 1.35 !important; }
  .proposal-creation-modal .checkbox-field small,
  .modal-contract-packet .checkbox-field small { margin-top: 4px !important; font-size: .67rem !important; line-height: 1.45 !important; }

  .proposal-creation-modal input:not([type="checkbox"]),
  .proposal-creation-modal select,
  .proposal-creation-modal textarea,
  .modal-contract-packet input:not([type="checkbox"]),
  .modal-contract-packet select,
  .modal-contract-packet textarea {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Keep actions usable and visible without covering form content. */
  .proposal-creation-modal .modal-footer,
  .modal-contract-packet .modal-footer {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) !important;
    gap: 10px !important;
    background: rgba(250,246,244,.98) !important;
    border-top: 1px solid rgba(93,62,80,.10) !important;
  }
  .proposal-creation-modal .modal-footer-right,
  .modal-contract-packet .modal-footer-right {
    display: grid !important;
    grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 9px !important;
  }
  .proposal-creation-modal .modal-footer .button,
  .modal-contract-packet .modal-footer .button {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 48px !important;
    padding: 11px 10px !important;
    white-space: normal !important;
    line-height: 1.2 !important;
  }

  .proposal-flow-intro {
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 14px !important;
  }
}

@media (max-width: 390px) {
  .proposal-creation-modal .modal-header,
  .modal-contract-packet .modal-header { padding-inline: 14px !important; }
  .proposal-creation-modal .modal-body,
  .modal-contract-packet .modal-body { padding-inline: 10px !important; }
  .proposal-creation-modal .modal-footer,
  .modal-contract-packet .modal-footer { padding-inline: 10px !important; }
  .proposal-creation-modal .modal-footer-right,
  .modal-contract-packet .modal-footer-right { grid-template-columns: 1fr 1.18fr !important; }
}