/* The Lab, cloud build only: hide PC-only controls; phone layout (bottom tab bar, card rows, 16 px fields, safe areas). */
.cloud [data-deploy], .cloud [data-qa], .cloud [data-qareport], .cloud [data-joblog],
.cloud [data-open^="C:"], .cloud [data-open^="c:"], .cloud [data-open^="\\\\"] { display: none !important; }

@media (max-width: 760px) {
  .cloud body { overflow: hidden }
  .cloud .app { grid-template-columns: 1fr; height: 100dvh }
  .cloud .main { height: 100dvh }
  .cloud .top { padding: max(10px, env(safe-area-inset-top)) 14px 10px; gap: 8px; flex-wrap: wrap }
  .cloud .top h1 { font-size: 21px }
  .cloud .search { order: 5; width: 100% }
  .cloud .search kbd { display: none }
  .cloud .syncpill span { display: none }
  .cloud .syncpill { padding: 0 14px }
  .cloud #addbtn { padding: 0 14px }
  .cloud .view { padding: 14px 14px calc(92px + env(safe-area-inset-bottom)) }

  /* sidebar -> bottom tab bar */
  .cloud .side { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; flex-direction: row; height: auto; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); gap: 0; overflow-x: auto; border-top: 1px solid rgba(255,255,255,.08) }
  .cloud .brand, .cloud .side-foot, .cloud .nav-label, .cloud .nav a[href="#tools"], .cloud .nav a[href="#assets"] { display: none !important }
  .cloud .nav { display: flex; width: 100%; justify-content: space-between }
  .cloud .nav a { flex-direction: column; gap: 3px; padding: 7px 6px; min-width: 52px; font-size: 10.5px; border-radius: 10px; justify-content: center }
  .cloud .nav a span { display: block !important }
  .cloud .nav a.on::before { display: none }
  .cloud .nav .count { display: inline-block !important; position: absolute; top: 1px; right: 4px; padding: 2px 5px; font-size: 9.5px }

  /* fields: 16 px so iPhone never zooms on focus */
  .cloud input, .cloud select, .cloud textarea, .cloud .sel, .cloud .inp { font-size: 16px }
  .cloud .addbar { flex-wrap: wrap; padding: 10px }
  .cloud .addbar .main-in { flex-basis: 100% }
  .cloud .toolbar .inp { width: 100% !important }
  .cloud .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none }   /* long filter rows scroll sideways inside themselves, never the page */
  .cloud .seg::-webkit-scrollbar { display: none }
  .cloud .seg button { flex: none }
  /* nothing wider than the screen: long dropdown options, long button labels and no-wrap rows inside grids */
  .cloud .view { overflow-x: hidden }
  .cloud .sel, .cloud select { max-width: 100%; min-width: 0 }
  .cloud .addbar .sel, .cloud .addbar .inp { flex: 1 1 130px }
  .cloud .grid2, .cloud .grid2 > *, .cloud .stack, .cloud .card, .cloud .pcard, .cloud .li .grow { min-width: 0 }
  .cloud .pgrid { grid-template-columns: minmax(0, 1fr) }
  .cloud .hello .btn { max-width: 100%; white-space: normal; height: auto; min-height: 42px; padding: 10px 18px; text-align: center }
  .cloud .pcard .foot { flex-wrap: wrap }
  .cloud .alert { flex-wrap: wrap }
  .cloud [data-route="costs"] .table, .cloud [data-route="tools"] .table, .cloud [data-route="assets"] .table { display: block; overflow-x: auto }
  .cloud .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important }
  .cloud .hello .actions { margin-left: 0; flex-wrap: wrap }
  .cloud .d-head, .cloud .d-body, .cloud .d-foot { padding-left: 16px; padding-right: 16px }
  .cloud .d-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)) }

  /* Leads table -> one card per lead: rank, name, estimate / grade, rating, distance, phone / status, buttons */
  .cloud [data-route="leads"] .table thead { display: none }
  .cloud [data-route="leads"] .table, .cloud [data-route="leads"] .table tbody { display: block }
  .cloud [data-route="leads"] .table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 14px; border-bottom: 1px solid var(--row) }
  .cloud [data-route="leads"] .table td { display: block; padding: 0; border: 0 }
  .cloud [data-route="leads"] .table td:nth-child(1) { order: 1 }
  .cloud [data-route="leads"] .table td:nth-child(2) { order: 2; flex: 1 1 55%; min-width: 0 }
  .cloud [data-route="leads"] .table td:nth-child(7) { order: 3 }
  .cloud [data-route="leads"] .table td:nth-child(3) { order: 4 }
  .cloud [data-route="leads"] .table td:nth-child(4) { order: 5 }
  .cloud [data-route="leads"] .table td:nth-child(5) { order: 6 }
  .cloud [data-route="leads"] .table td:nth-child(6) { order: 7 }
  .cloud [data-route="leads"] .table td:nth-child(8) { order: 8 }
  .cloud [data-route="leads"] .table td:nth-child(9) { order: 9; margin-left: auto }
}