@media (max-width: 980px) {
  #app { flex-direction: column !important; height: auto !important; overflow: visible !important; }
  #editor-panel { width: 100% !important; height: auto !important; border-right: none !important; border-bottom: 1px solid var(--pale-husk); }
  #editor-scroll { overflow: visible !important; }
  #action-bar {
    position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 60; box-shadow: var(--shadow-docked);
    /* keep the buttons clear of the home indicator and landscape notches */
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    padding-left: max(20px, env(safe-area-inset-left)) !important;
    padding-right: max(20px, env(safe-area-inset-right)) !important;
  }
  #preview-wrap { padding: 20px 12px 110px 12px !important; height: auto !important; }
}

/* ---------- Invoice preview: sized by the preview panel, not the viewport ----------
   The PDF is captured from a detached copy of #invoice-page that sits outside
   #preview-wrap, so none of these container rules ever reach the PDF: it always
   renders the full 794px A4 layout. */
#preview-wrap { container: preview / inline-size; }
.pv-line { display: none; }

/* Narrower than the A4 sheet: fill the panel instead of scrolling sideways. */
@container preview (max-width: 793px) {
  #invoice-page { width: 100% !important; padding: 28px 22px !important; }
}

/* Phone-width preview: restack for reading. Each line item becomes
   description + amount, with "qty × rate · size" on a line underneath. */
@container preview (max-width: 619px) {
  .pv-head { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; }
  .pv-head-meta { text-align: left !important; }
  .pv-logo { width: 64px !important; height: 64px !important; }

  .pv-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: start !important; }
  .pv-mid { display: none !important; }
  .pv-desc { padding-bottom: 2px !important; }
  .pv-amt { width: auto !important; padding-bottom: 2px !important; }
  .pv-row-bar .pv-amt { padding-top: 16px !important; }
  .pv-line { display: block; grid-column: 1 / -1; padding: 0 16px 12px; font-size: 12.5px; color: var(--field-loam); }
  #pv-thead .pv-amt { width: auto !important; }

  .pv-totals-box { width: 100% !important; }
  .pv-pay { grid-template-columns: 1fr !important; }
  /* phone/email links: 24px+ tap targets (preview only; the PDF header keeps its spacing) */
  #invoice-page a { display: inline-block; padding: 4px 0; }
}

/* ---------- Touch input: comfortable targets, no iOS zoom on focus ---------- */
@media (pointer: coarse) {
  /* 16px stops iOS Safari from zooming the page when a field is focused */
  #editor-panel input, #editor-panel select { font-size: 16px !important; min-height: 44px; }
  .chip { min-height: 44px; padding: 10px 14px; }
  .mode-tab, .btn-add, .btn-disc { min-height: 44px; }
  /* enlarge the × hit area to 44px without changing the row layout */
  .btn-x { position: relative; }
  .btn-x::after { content: ''; position: absolute; inset: -10px; }
}

/* Very narrow phones: the custom-item row wraps onto two lines. */
@media (max-width: 400px) {
  .custom-row { grid-template-columns: 1fr 1fr !important; }
  .custom-row select, .custom-row button { grid-column: 1 / -1; }
}