/* EagleTagz demo: phone layouts (change #6, October 2026), on every page with the top bar.
 *
 * On a 390px iPhone, most tappable controls were smaller than Apple's 44 x 44px minimum,
 * long titles (file names have no spaces) ran to three to six lines or pushed the page
 * sideways, and Contracts, My Library and Tracking could be dragged sideways. Now:
 * - touch screens get 44 x 44px targets for the logo link, the copy-ID buttons, Camera's
 *   round controls and tag panel, Add to cart, product names, My Library's filters and buttons,
 *   Contracts' buttons, Clear History and the map's zoom and refresh buttons;
 * - card titles wrap anywhere and stop at two lines;
 * - on phones, Contracts' rows and Tracking's map buttons stack instead of running off screen.
 * Load Media's address row (fields.css) and the home-page logo (home.css) are fixed in their
 * own files; the Tracking tree (too small to read on a phone) is not changed here. */

/* every page: the 28px logo links home; give it a 44 x 44 tap area without moving anything */
header a[href="/"]:has(> img[src*="eagletagz-logo"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: -8px;
  padding: 8px;
}

@media (pointer: coarse) {
  /* Price & Copyright: the copy button beside each EagleTagz ID */
  #copyrightsContainer button[onclick^="navigator.clipboard"] { min-width: 44px; min-height: 44px; }
  /* Camera: the round controls beside the picture */
  .floating-controls > button { width: 44px !important; height: 44px !important; }
  /* Store */
  .add-to-cart-btn { min-height: 44px; }
  /* My Library */
  .filter-pill { min-height: 44px; }
  .purchase-card button { min-width: 44px; min-height: 44px; }
  /* Contracts */
  .contract-card button { min-width: 44px; min-height: 44px; }
  /* Tracking: the map's + and - */
  .leaflet-touch .leaflet-bar a { width: 44px !important; height: 44px !important; line-height: 44px !important; }
}

/* My Library and Contracts: long titles wrap anywhere and stop at two lines */
.purchase-card .flex-1,
.contract-card .flex-1 { min-width: 0; }
.purchase-card h3,
.contract-card h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.contract-card p { overflow-wrap: anywhere; }

@media (max-width: 640px) {
  /* Contracts: the type/price column goes under the title, the buttons under the signature */
  .contract-card > .flex.items-start.justify-between { flex-direction: column; gap: 8px; }
  .contract-card > .flex.items-start.justify-between > .text-right { text-align: left; }
  .contract-card > .flex.items-center.justify-between { flex-direction: column; align-items: stretch; gap: 12px; }
  .contract-card > .flex.items-center.justify-between > .flex { justify-content: flex-end; flex-wrap: wrap; }

  /* Tracking: Enable GPS and Refresh Map wrap under the map's title */
  div.flex.justify-between:has(> div > #refreshMapBtn) { flex-wrap: wrap; gap: 12px; }
}

/* touch screens: the last small controls found on a 390px phone */
@media (pointer: coarse) {
  button[onclick^="clearUploadHistory"] { min-height: 44px; }        /* Load Media: Clear History */
  #closeAITagging, #closeQRScanner { width: 44px !important; height: 44px !important; } /* Camera panels */
  #addAITag, #voiceTagBtn { min-width: 44px; min-height: 44px; }
  #videoError button { min-height: 44px; }                            /* Micro: Load Fallback Video */
  #refreshChartBtn { min-width: 44px; min-height: 44px; }             /* Tracking: refresh the tree */
  .product-card .p-6 > a[href^="/marketplace/product/"] { display: block; min-height: 44px; } /* Store: product names */
  a[href="/marketplace"].text-blue-400 { display: inline-flex; align-items: center; min-height: 44px; } /* Store: View All */
}